I having a quite hard time in doing this thing.
I have a landing page with 12 buttons on it. When you click a button, it directs you to a page with a nav bar with 12 li a's.
I already made a portion of the code that sets it to active.
<li><a href="..." class="active">
when that page with the active a class loads, it should scroll to it. the navbar is horizontal. i've tried scrollTo, but no joy. Thanks .
Update:
Here's the sample ss.
http://postimg.org/image/xtn1ljsnt/
the tab "Item 5" must be shown in the middle. It's like
Item4 Item5 Item6
thanks
It's hard for me to visualize the markup If you only provide a single element, but the example below should be enough if you modifiy it to suit your scenario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#foo {
margin-top: 1000px;
}
</style>
</head>
<body>
<div id="foo">Hello</div>
<script>
$(function () {
$('html, body').animate({
scrollTop: $("#foo").offset().top
}, 2000);
});
</script>
</body>
</html>
jsFiddle
Related
I added a WebGL 3D animation to the page with VantaJS.org, I have completely written the code as same as the official example, but the 3D animation is stopped once I scroll down the page. You can check the demo here: https://lovage.io/3d and my codes below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
<script src="https://lovage.io/3d/js/three.r92.min.js"></script>
<script src="https://lovage.io/3d/js/vanta.wave.min.js"></script>
</head>
<body>
<section id="layer"></section>
<div style="height:3000px;"></div>
<script>
VANTA.WAVES({
el: "#layer",
});
</script>
</body>
</html>
However, the official demos works fine on my browser. Anyone can give me any tips debugging?
Thanks in advance!
You need to give height and width to your section.
You attached the event on that tag but since has no dimensions you lost the animation at the first scroll.
Try this
body, section{
height: 100%; width: 100%
}
Code Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
</div>
<div id="fullsite"></div>
</body>
</html>
jQuery:
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $("#fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('#intro').hide(2000);
});
Simple CSS:
body {
overflow: hidden;
}
Hi everyone, I am not a jQuery expert. I am the beginner. So, I have a problem. I have two div wraps, one for the intro and one for full site. I am making a site like this, When I will open my site in a browser only the top #intro div will visible and the full site will hidden. I am using the overflow: hidden; to hide everything other side of the computer screen. I have a control in the #intro div screen to unlock the full site. So, When I will click in the control the site will scroll to #full-site. I am doing it using query and I am adding $('html, body').css('overflow', 'auto'); to show the hidden part of the site. Also, I am adding $('#intro').hide(2000); to hide the top #intro.
At this time top #intro is hiding and the scroll effect is working. But the #intro div content going left side, right side when the #intro is hiding and the scroll effect is not going targeted id. It's going very down from the targeted div. How can I do the work properly?
You wrote #fullsite in your javascript, but <div class="fullsite"></div> in your HTML.
You need to change your HTML as <div id="fullsite"></div>.
The same error for intro.
Remember: for accessing to ID you should prefix with #, for classes you should use ..
You can read more about the selectors here: http://api.jquery.com/category/selectors/basic-css-selectors/
In your case I prefer the solution based on "id" and not on "classes". Infact any valid HTML document can contain many elements using the same class, but shouldn't exist more element with the same id.
This means that $(".aaa") will return a list containing any element with aaa class, but $("#aaa") will return the only element with aaa id.
is this how you want to run the code
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $(".fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('.intro').hide(2000);
});
.container {
overflow: hidden;
height: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="intro">
go to fullsite
</div>
<div class="fullsite">this is fullsite</div>
</div>
</div>
On my website, I have to build multiple spoilers. I'm planning to use this code for creating spoilers: How to create multiple spoiler buttons.
I'm looking for an easy way to create a link 'x' on a page 'A.html' that leads to the page 'B.html' and opens the spoiler 'x' on the page 'B.html'. So the spoiler name="x" and the URL should look similar to B.html#x.
In other words, I need a table of contents on the page A.html for spoilers on the page B.html.
But if you go straight to the page B.html, all spoilers should be closed by default with an option to open and close them by clicking on the spoiler title.
Any ready-made solutions would be appreciated. The solution shouldn't necessarily be based on the code I provided above.
Ok, I know that it's totally wrong, but this is what I tried.
A.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</body>
</html>
B.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="x" class="spoiler">Content1</div>
<div id="y" class="spoiler">Content2</div>
<div id="z" class="spoiler">Content3</div>
<div class="contentBoxFooter">
Show/Hide
Show/Hide
Show/Hide
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$(''+foo).slideToggle(1000);
});
});
</script>
</body>
Update: here's the example of what I need: https://support.google.com/plus/#topic=3049663 each section adds a unique URL ending to the link.
If you don´t like to do it over the querying the url, you need to open B.html in a new javascript window.
And there you can do something it, e. g.:
window win = window.open("B.html");
win.document.myVariable = "test";
Then you could read the variable on website B.html as you usually would do with myVariable
Edit: If you just want to load page B.html into a spoiler in page A.html then it´s just a single jquery command:
$("#spoiler").load("B.html");
I found a solution here: https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page
But I ended up with the accordion, instead of a set of spoilers, as I initially wanted.
I have a page where when you click a tab with text, you are linked to a different page with an expanded description contained within a white block. On this page, I want the user to be able to return to the previous page by clicking anywhere in the background (not on the white block). Right now, clicking anywhere on the page with the expanded description links back to the main page (when it should be ignoring clicks on the white div containing the description). Here's my javascript:
$('html:not(.detailwhite)').mousedown(function(e) {
document.location.href="index.html";
e.stopPropagation();
});
And here's my html:
<!DOCTYPE html>
<html>
<head>
<title>Group details</title>
<!--library files-->
<script src="lib/jquery_min.js"></script>
<!--stylesheets-->
<link rel="stylesheet" type="text/css" href="style/detailstyle.css">
<!--javascript-->
<script type="text/javascript" src="js/interactive.js"></script>
</head>
<body class="detailbg">
<div class="detailwhite">
<h1 class="name">Group Name</h1>
<img class="pic" src="style/testPic300x200.png" alt="Group picture"/>
<p class="description">Here's the detailed description of the group.<p>
</div>
</body>
</html>
Summary: Clicking anything BUT the 'detailwhite' div should link the user back to index.html. Unfortunately, the 'but' is ignored.
Thanks for reading.
Your selector is adding the handler to a html element which does not have the class detailwhite, Instead you need
jQuery(function ($) {
$(document).mousedown(function (e) {
document.location.href = "index.html";
e.stopPropagation();
});
$('.detailwhite').mousedown(function (e) {
e.stopPropagation();
});
})
Demo: Fiddle
I want to use jQuery or Javascript to take my logo and when the page loads, slide it from the left hand side of the page and make it stop and stay at it's resting spot about mid way through the page. (Logo div id="mylogo")
$(document).ready( function () {
$("#myLogo").animate("aCSSAttribute", "toThisValue");
});
also check:
http://api.jquery.com/animate/
If you show your effort, then I can help you out better.
You'll probably want something like this: http://jsfiddle.net/SATMY/1/
Your question is not clear at all, so it is hard to say whether it is possible that my answer is, indeed, a correct answer.
$("div#logo").animate({"marginLeft":"-50px"}, 800);
And initial CSS:
margin-left: -900px; /* Before slide-in */
You'll need to work out just how far it needs to move, the example below makes an assumption of x% but you can do this to the pixel should you need to.
Don't forget to position your logo, and to make sure the outer element has some width/display definition.
Fiddle
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {width:100%;}
#mylogo{border:1px solid red;width:200px;height:100px;display:block;position:relative}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mylogo').animate({left:'+=25%'});
});
</script>
</head>
<body>
<div id="main">
<div id="mylogo"></div>
</div>
</body>
</html>