When I click a link to an element ID, I want it to animate, like the first ID fade out and the new one that's being scrolled to fades in.
OR
I want to animate scroll to the other one. I've looked around on here and on other sites, including google searches, and I haven't found anything that works with my code. I understand I'll need jquery etc, everything I've tried hasn't worked so I've removed all the JS.
If anyone could help it would be greatly appreciated, thank you!
Also if there's a simpler solution to having the content in the middle with no scroll bar so each section loads faster but stays in the middle I'd love to know. I'm pretty new to all this it's really confusing. And I haven't got much of a clue about JavaScript yet.
Thank you.
CSS:
* {
margin:0;
padding:0;
text-decoration:none;
box-sizing:border-box;
font-family:tahoma;
overflow:hidden;
}
body {
background: url(http://www.visionpharmacy.org.uk/assets/img/main/22.jpg) no-repeat;
height:100vh;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.wrapper {
width:960px;
max-width:100%;
margin:0 auto;
position:relative;
height:100vh;
z-index:1;
}
.wrapper > #welcome, #contact {
background:rgba(250,250,250,0.8);
padding:40px;
margin-top:15vh;
height:80vh;
}
header {
position:fixed;
width:100%;
max-width:100%;
height:10vh;
background:white;
z-index:2;
}
header > h1 {
font-family:sans-serif;
font-size:2em;
padding:0 0 0 20px;
line-height:70px;
font-weight:600;
color:black;
float:left;
}
nav {
float:right;
line-height:10vh;
padding:0 20px 0 0;
}
a[name="backtotop"] {
font-size:1em;
color:black;
}
a[name="backtotop"]:hover {
color:lightseagreen;
transition:0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
HTML:
<!doctype <!DOCTYPE html>
<html lang="en">
<head>
<title>Company Name</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/scroll.js"></script>
<meta charset="UTF-8">
<meta name="language" content="English">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Company Name</h1>
<nav>
Home - Contact
</nav>
</header>
<main>
<div id="first" class="wrapper">
<div id="welcome">
testing 1, 2
<a name="backtotop" href="#">Back to top</a>
</div>
</div>
<div class="wrapper">
<div id="contact">
More testing?
<a name="backtotop" href="#">Back to top</a>
</div>
</div>
</main>
</body>
</html>
JS Fiddle:
https://jsfiddle.net/5nwudmhc/
try this:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Then you should add the #contact (or any #IDhere for that matter) to the link you want the user to click.
And add id="contact" (or any id="IDhere" for that matter) to the element you want to scroll to.
EDIT:
okay, so the not scrolling part is due to the fact that the overflow is hidden (overflow: hidden;), when you remove that, it'll work, but the background will also move up, so in the body element in the CSS you need to add background-attachment: fixed; to the body element aswell, now the problem is that the content at the top of the page is not readable because of the navbar, the content is still there. But I guess you can fix that yourself. I'll provide a final snippet: https://jsfiddle.net/64vmo586/
i think something like this would work to animate the scrolling:
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
var scrollhere = target.offset().top;
$('html, body').animate({
scrollTop: scrollhere
}, 1000);
}
});
Then you need to have the same href as the div ID where you want it to scroll, for instance:
Contact
will scroll to
<div id="contact">
If you want to change the speed of the animation, you can change that number just and the end of the function. in the example i have set to 1000ms ( equals to 1s)
Related
I'm using the code below to scroll through different divs after a timed period. However, the page keeps sliding back to bottom div when manually scrolling back up.
Is there a way to use this code but override the automatic slide back, where I can manually scroll to any div without it jumping back to the bottom before I finish reading what is in that div.
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
<script type="text/javascript">
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 500 }, 'slow');
}
}
</script>
Took me a while for this to figure it out.
Basically, you make it run on a class and set a function with timeout so that after the scrolling animation, function removes that class from a div. That way when it wants to run again it doesn't have anything to run on. And scrolling stops.
Hope this helps.
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('.scroller').delay(2000).animate({ scrollTop: $(".scroller").scrollTop() + 500 }, 'slow');
}
};
setInterval(function(){ $("#scroller" ).removeClass("scroller"); }, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller" class="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
I am trying to implement a loader for a background image until the whole image is completely loaded using jquery. I have tried the various method to do this. Since the image is specified in the CSS I could not specify the exact image id or class. Finally I end up doing this ,
$(window).load(function() {
$(".loader").fadeOut("slow");
})
But doing this it is happening when the window is loaded. I wanted to happen it until the image is completely loaded.
And the background image comes under the following section
<div class="loader"></div>
<div class="test_banner services_banner">
</div>
It would be great if somebody give a helping hand to manage this case. Thanks in advance.
Maybe you could use a multiple background-image
example:
div {
height:90vh;
width:90vw;
background:url(http://lorempixel.com/1200/800/nature/) center,
url(http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif) center center no-repeat ;/* this works once/untill image has been loaded */
<div></div>
The Gif background remains here but is painted behi,d the big image. It is seen as long as the big image is not loaded ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Create a "Please Wait, Loading..." Animation</title>
<style>
.overlay{
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
background: rgba(255,255,255,0.8) url("http://www.jqueryscript.net/demo/Simple-Customizable-jQuery-Loader-Plugin-Center-Loader/img/loader1.gif") center no-repeat;
}
body{
text-align: center;
}
/* Turn off scrollbar when body element has the loading class */
body.loading{
overflow: hidden;
}
/* Make spinner image visible when body element has the loading class */
body.loading .overlay{
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// Initiate an Ajax request on button click
$(document).on("click", "button", function(){
// Adding timestamp to set cache false
$.get("/examples/php/customers.php?v="+ $.now(), function(data){
//$("body").html(data);
});
});
// Add remove loading class on body element depending on Ajax request status
$(document).on({
ajaxStart: function(){
$("body").addClass("loading");
},
ajaxStop: function(){
$("body").removeClass("loading");
}
});
</script>
</head>
<body>
<button type="button">Get Customers Details</button>
<div class="overlay"></div>
</body>
</html>
I'm trying to accomplish something as simple as putting to div's side by side. The thing is I'm very capable in CSS, however the solutions I'm trying to use do not work as intended, here is the problem.
I'ved used: (so both divs is laying side by side)
display: block; float: left; margin-right: 15px;
And it work flawlessly LOCALLY, the thing is I'm creating this as a template solution which the html & css are being build into a system and after that will be generated to a javascript tag. The javascript tag will then be thrown into different websites and therefore, it's very important it acts alike in all browsers.
Then i tryed position the div (the one laying on the side) to: absolute and using left to position it on the side... That don't work either because its absolute to where the tag is implemented, meaning it would show up different places depending which site the tag is implemented.
So my question is, is there a way i can use either css or javascript so my divs are side by side no matter where i implement the tag?
Below is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Sidekick</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/sidekick.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
CSS:
.eas_sidekick_divs div
{
display: block;
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 850px;
height:600px;
background: #ccc;
}
This solution works locally as said, but not after i generate this to a tag. You can see the example here:
http://yoursource.eu/stuff/Templates/sidekick/300x250/javascript.html
Look in the different browsers like: IE & Chrome and see the difference and how weird it acts.
Click on the button of the little banner to the right stating: "exiting me" and you'll see the div expand, the expanded div is the one i want to position to right at all times.
Hope u can help me out! :)
You can use display:inline-block; or display:block; both will work but as you mention "#eas_sidekick_container" width should be equal or should not exceed with parent Element width please correct "#eas_sidekick_container" width.
Here is the corrected code
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.eas_sidekick_divs div
{
float: left;
margin-right:15px;
}
#eas_sidekick
{
width:300px;
height:600px;
background: #ccc;
}
#eas_sidekick_container
{
width: 300px;
height:600px;
background: #ccc;
}
</style>
</head>
<body>
<div class="eas_sidekick_divs">
<div id="eas_sidekick">
<div class="eas_sidekick_open">x</div>
</div>
<div id="eas_sidekick_container"></div>
</div>
</body>
</html>
I've figured out myself a javascript solution for fixing my issue.
I've used position absolute to fix it in all browsers and then created a javascript that depending on the width of the site, it position itself always 10 pixels to the right of my container.
Below is my code:
$(document).ready(function() {
var cssWidth = 1024;
var cssPos = 10;
$("#eas_sidekick_container").hide();
$("#eas_sidekick_container").css(
{
width: '0px',
position: 'absolute',
top: '0px',
left: cssWidth + cssPos
});
$(".eas_sidekick_open").click(
function() {
$("#eas_sidekick_container").show();
$("#eas_sidekick_container").animate({
width: '850px'
});
$('html, body').animate({
scrollLeft: '850'
});
});
$(".eas_sidekick_close").click(
function() {
$("#eas_sidekick_container").animate({
width: '0px'
});
setTimeout( function(){
$("#eas_sidekick_container").css(
'display' , 'none'
);
}, 350);
});
});
So I'm using background-size:cover to achieve the desired effect of a background image that scales to any size of the div it's applied to while maintaining the aspect ratio. Why use this method? The image is being applied as the background using inline CSS, dynamically through PHP, based on what's being set as the image in the correlating WordPress post.
So everything works great, but is there any fallback to ensure this'll work in at least IE8? Possibly some Javascript fixes?
Already tried backstretch and supersized, but to no avail, since they apply the images only to the background of the page.
You can see it in action over here.
In IE8 or below, a foreground image inserted as the child of a div with defined width/height would be the only workaround:
<!doctype html>
<html lang="en">
<head>
<title>Dynamic Image Sizing</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left; }
#pseudobg { position:absolute; z-index:1; width:100%; height:100%; }
#scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; }
#dyndiv { position: absolute; left: 50%; width: 200px; height: 300px; }
</style>
</head>
<body>
<div id="scroller">
<!-- Insert your content here -->
<div id="dyndiv">
<img id="pseudobg" src="http://www.stackoverflow.com/favicon.ico" alt="" title="" />
</div>
</div>
</body>
</html>
If that is not equivalent, ask Stu Nicholls for further help.
Demo:
I've tried the answer before and it did not work as background-size: cover; is expected, it did in fact fit the image into the size chosen , but it did not clip the excess to the new measures which is what i expected from "cover" option. My solution was found here : http://selectivizr.com/
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="path/to/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
<style>
.with-bg-size
{
background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
background-position: center;
/*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale');
it didnt work as cover is expected */
width: 200px;
height: 100px;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}
</style>
<body>
<div class="with-bg-size">Donald Duck!</div>
</body>
</html>
If you need to shrink the size of your image, rather than grow it, this approach doesn't work. The best approach I've found avoiding Javascript is superimpose two images on top of each other, on hover make the top one transparent. All other approaches involving resizing the originals (eg, background-size) seem to fail in IE.
CSS:
.social-btn-container {
width:46px;
height:46px;
position:relative;
float: left;
margin-right: 15px;
}
.social-btn-container:hover > .top-btn {
visibility:hidden;
}
.social-btn {
margin:0;
padding:0;
border:0;
width: 46px;
height: 46px;
position: absolute;
left:0;
top:0;
}
.top-btn {
z-index: 1;
}
.top-btn:hover {
opacity: 0;
}
HTML:
<div class="social-btn-container">
<a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook">
<img src="images/icons/facebook_top.png" class="top-btn social-btn" />
<img src="images/icons/facebook_bottom.png" class="social-btn" />
</a>
</div>
The .social-btn-container:hover > .top-btn part gets this working in IE quirks mode, which doesn't seem to support opacity, and if you use :hover{visibility:hidden} hover becomes false when visibility becomes hidden, causing flickering. (The outer div also positions the images.) I've tested this in FF23, IE standards and quirks (getting IE 10 to emulate 7, 8 and 9), Opera and Safari.
In IE8 or below use separated the background: code:
-webkit Example:
background: url('img/habesha.jpg') no-repeat center center;
-webkit-background-size: cover;
- in IE try:
background-image:url('img/bright_switch.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;
More details here: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx
I am trying to make a portfolio where if you click on ‘scroll page’, the page will scroll completely until the footer image is one with the top image. So you can see one complete image when header and footer are merged.
I have searched Google and Stack Overflow, but unfortunately I couldn't find anything that did the trick.
EDIT
i have updated the style.
On IE9 it scrolls until footer hits header and it fits good, but in google chrome it does not.
Anyone have any idea? Thank you
EDIT 2
I have managed to make the page scroll but now i have height property problems in web crossing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | S.H. MOKHTAR | 2011</title>
<link rel="stylesheet" type="text/css" href="layout/styles.css" />
<script>
function pageScroll() {
window.scrollBy(0,60); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',50); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
</head>
<body>
<div id="header"></div>
<div id="content"><input type="button" onClick="pageScroll()" value="Scroll Page">
Stop Scrolling<br>
<br>
</div>
<div id="footer"><img src="layout/images/bot.png" style="width:auto; height:auto" /></div>
</body></html>
body, html, div, input, footer{
margin: 0;
padding: 0;
border: 0;
outline: none;
}
body{
width:100%;
}
#header{
background:url(images/top.png); height:auto; width:auto; background-repeat:no-repeat;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 43px;
}
#content{
margin-top:50px;
}
#footer{height:870px;
}
EDIT 3
With help i managed to resolve the height problem, The new code is up and running and for download at http://www.sushitaksteeg.nl/secret/Port.rar or live at http://www.sushitaksteeg.nl/secret/template.html for now.
My other question where i could solve this problem with help is: Height different in IE FF Chrome
Thank you
Haven't tested it, but something like this:
$("body").scrollTop($("#yourimage").position().top);
(With jQuery ofcourse for XB (Cross Browser))