This question already has answers here:
Scroll to the top of the page using JavaScript?
(49 answers)
Closed 6 years ago.
I want to have a button, and when you click on it, it will get you (the visitor) to the top of the page.
How can this be done?
Thanks
If you have a keyboard attached:
Press the 'Home' button.
The classic operation of hyperlinks is to point to a page different from the one being viewed, to navigate the site. It is also possible to create a link to a specific location on the current page, or to another page in order to position the browser correctly.
Creating an anchor is easy: you just have to assign the element to which you want to be able to point an identifier (with the attribute HTML id) and to associate a link starting with the character #, followed by the name of this Identifier.
Ex:
<div id="top">...</div>
It is then enough to make a link to this anchor:
top of page
Demo:
<!DOCTYPE html>
<html>
<head>
<title>top link</title>
<meta charset="UTF-8">
</head>
<body>
<div id="top">...</div>
<!-- Content -->
<!-- Content -->
<!-- Content -->
top of page
</body>
</html>
On button click, run the Javascript:
window.scrollTo(0, 0);
You can do it like this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Back To Top Button by CodexWorld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
</script>
<style type="text/css">
/* BackToTop button css */
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#3498db;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}
</style>
</head>
<body>
<!-- BackToTop Button -->
Top<span></span>
<!-- ++++++++++++ Page Content Goes Here ++++++++++++ -->
</body>
</html>
Just Copy & Paste the script and run
For a link:
Back to top
With button:
<a href="#">
<button>Back to top</button>
</a>
See also:
How to create an HTML button that acts like a link?
HTML Anchors with 'name' or 'id'?
Related
So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '
A div I have made that displays only when the mouse hovers over a certain link
the div has a display: none when the mouse moves away from the link
this is the code I have used
HTML:
Login/Sign Up
JavaScript:
function LoginShow (){
document.getElementById("log").style.display="block";}
function LoginHide(){
document.getElementById("log").style.display="none";}
But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.
I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.
I have also tried
Login/Sign Up
<div class="login" id="log" onmouseover="LoginShow()"
onmouseout="LoginHide()">
It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.
You can do it without any js, take a look at below snippet.
let target = document.getElementById('target');
function showLog() {
target.style.display = 'block';
}
function hideLog() {
target.style.display = 'none';
}
.wrapper {
background: #eee;
}
.wrapper .inner-content {
display: none;
position: absolute;
background: red;
}
<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
I am the wrapper
<div class="inner-content" id="target">
<p>Here is some content inside wrapper element</p>
</div>
</div>
i think it can be done with css selectors as you can make other div as the switch to change other elements.
Reference for css selectors
And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.
Edited:
here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.
function LoginShow (){
document.getElementById("log").style.display="block";
}
function LoginHide(){
document.getElementById("log").style.display="none";
}
.container{
width:400px;
height:400px;
background:lightgreen;
border:1px red solid;
}
#log{
background:#efefef;
padding:20px;
width:100px;
text-align: center;
display:none;
}
.log>button{
padding:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="container">
Login/Sign Up
<div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
</div>
<script src="main.js"></script>
</body>
</html>
I'm trying to load an html page inside a div. It works well, except that the "loaded" page only fills a small portion of the parent.
This is the function that loads the HTML:
function load_inner() {
Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
}
The div that is to be filled is 500*200px.
The page that is loaded is supposed to fill the parent, but in this case the inner div is set to 1000*500px for testing purposes (the parent has the overflow property set to hidden).
This is the page that loads the content (everything is surrounded by the html tag):
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
<style type="text/css">
#Content { width:500px; height:200px; background:orange; overflow:hidden;}
</style>
<script type="text/javascript">
function load_inner() {
Content.innerHTML='<object type="text/html" data="page_test.html"></object>';
}
</script>
</head>
<body onload="load_inner()">
<div id="Content"></div>
</body>
This is the page that is loaded (everything is surrounded by the html tag):
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
<style type="text/css">
#Cont { background:yellow; }
body { margin:0px; padding:0px; }
</style>
</head>
<body>
<div id="Cont">
<span>IM A TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEST</span>
</div>
</body>
And this is the result:
I've made some tests and it seems that this only happens with the object tag.
This works ok (the content is not "limited"):
Content.innerHTML='g...g';
If I send a GET request to the target page and set the innerHTML to the "responseText" it displays correctly:
function load_home() {
var url = "http://localhost/inner_load/page_test.html";
var method = "GET";
var async = true;
var request = new XMLHttpRequest();
request.onload = function () {
var data = request.responseText;
Content.innerHTML=request.responseText;
}
request.open(method, url, async);
request.send();
}
What is the problem with the object tag and how can this be solved? Thanks in advance!
If you set the width of the object to 100% that 100% reflects the width of the parent div (orange) not the content that is loaded - so you are loading a 1000px div into a 500px (100% of its parent) object tag. If you do not want scroll bars you need to size the object to be the same size as the content you are loading into it ie 1000px. So the answer is that there is nothing wrong with the object tag.
example:
<div id="content"> //500px
<object> //at 100% it is also 500px
<div>Loaded content</div> //this is 1000px and hence the scrollbar on a parent object
</object>
</div>
Hello I am trying to create sliding out tabs on this website: http://imaginationmuzic.com/
I am referring to the red 'Contact Us' and blue 'Twitter' tabs at the left and right of the site.
Currently the Contact Us tab opens up in a top to down motion; I would like it to open up from left to right like a sliding out tab.
Here is the code I used in the header:
$(document).ready(function(){
$(".btn-slide2").click(function(){
$("#panel2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
I also would like the opposite to be done for the Twitter tab (have it open left to right).
Any help would be appreciated.
Some crude js code I made to demonstrate.
<!DOCTYPE HTML>
<html>
<head>
<!--Add style sheet-->
<link rel="stylesheet" type="text/css" href="soc.css">
<!--Add jquery-->
<script src="jquery-1.10.2.js">
</script>
<!--Add script for this page-->
<script src="soj.js">
</script>
</head>
<body>
<div id="container">
<div id="panel"> </div>
<div id="contact"> </div>
</div>
</body>
<html>
-------------css----------
#panel{
height:500px;
width:200px;
background-color:#EE4488;
}
#contact{
position:relative;
top:-500px;
left:200px;
width:10px;
height:50px;
background-color:#22EEFF;
}
#container{
position:relative;
left:-200px;
}
------------JS---------
$(document).ready(function(){
var pos='in';
$("#contact").click(function(){
if(pos=='in'){
$("#container").animate({left:'0px'
});
pos='out';
}
else
{
$("#container").animate({left:'-200px'
});
pos='in';
}
});
});
I searched alot about this and tried some of my own but I can't seem to make it work.
What I'm trying to realize is a progress bar that adds 10 or subtracts 10 every time you press a button.
Example when you press the button UP you add 10 to the progress bar and when you press the button DOWN you remove 10 from the bar.
Whatelse I'd want to realize is a script that can "read" the status of the progressbar and with an if or else function display a text from a paragraph (If > 50 it'll fadeIn a text, else < 50 it'll fadeIn a different text)
Hope I explained myself well and hope anyone can help me. I'm still new in jQuery/JavaScript.
jQuery UI has a built-in progress bar that you can do what you want easily.
http://jqueryui.com/demos/progressbar/
Here's a simple implementation of what you're trying to do:
http://jsfiddle.net/makotosan/bW5Wd/3/
Here is a little example to get you started; there are a lot of capabilities to this script, don't be afraid to experiment a little bit:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Progress Bar</title>
<meta charset="utf-8" />
<style>
#progress {
position:relative;
width:25px;
height:100px;
border:2px solid #000;
background-color:#ccc;
}
#progress div {
position:absolute;
bottom:0;
height:0;
width:25px;
background-color:#f00;
}
span {
margin:10px auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// Define your variables
var interval=10;
var half=50;
var max=100;
var texts=['Less then 50...','More then 50!'];
var upButton=$('button[name="up"]');
var downButton=$('button[name="down"]');
var bar=$('#progress').find('div');
upButton.on('click',function(){
var height=bar.height();
if(height>=0 && height<max) {
var newHeight=parseFloat(height+interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
downButton.on('click',function(){
var height=bar.height();
if(height>0 && height<=max) {
var newHeight=parseFloat(height-interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
});
</script>
</head>
<body>
<h1>Progress Bar</h1>
<p>
<button name="up">Add</button> <button name="down">Remove</button>
</p>
<div id="progress">
<div> </div>
</div>
<span></span>
</body>
</html>
How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.