I have embeded the following code onto my sharepoint online site. The image appears in the bottom right hand corner and once clicked it takes me to the top of the page, as coded; however the Jquery javascript code doesn't appear to work... The image just stays visible regardless of how many pixels are scrolled.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"><\script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top"><img style="border: none; height: 37.5px; width:50.5px" src="backtotop-1.png" ></a>
</div>
The above code encompasses both suggested solutions and still doesn't appear to work! The image is visible regardless of how much the page is scrolled, yet once clicked the image disappears. The code appears to work completely fine in a plain .html file.
Please help! Thank you very much in advance.
Current Console Error:
Check the jsfiddle link of your code. It works perfectly well. You just need to check the below line if the jquery 1.6.4.min.js:
<script type="text/javascript" src="http://code.jquery.com/jquery 1.6.4.min.js"></script>
This should be the right one: http://code.jquery.com/jquery-3.3.1.js
yeah, its your jquery source. have u seen a "space" in jquery src line, also you forget to close the tag. and for future dont forget to check the browser console for errors.
you can use the following fixed code in your source file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(window).scroll(function() {
if ($(this).scrollTop()>100) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
</script>
<style>
body{
border: 1px dotted red;
min-height: 1000px;
}
</style>
<div id="toTop">
<a style="position: fixed; bottom:20px;left:5px;" href="#ctl00_onetidHeadbnnr2" title="Back to Top">
<img style="border:1px solid red; height: 37px; width:50px" src="https://i.imgur.com/WkCCy7L.jpg" >
</a>
</div>
let me know if this fixes your error now.
Related
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?
I'm using the Disqus comments plugin on my wordpress site on http://swiftcarbon.com/carocap-the-journey-thus-far/
As you can see it is using a much darker blue (rgb(0,0,238)) than the sites blue (##288ce4), for the underlines, and anchor tags.
I've read the documentation on https://help.disqus.com/customer/portal/articles/545277 , but according to this article Disqus should apply a black colour to those links, which I'd be happy with.
So far I've tried to override the style with !important to change the colour which didn't work. I've even tried, although I know it's a no-no, to inject styles using the Javascript on the $(window).load() method to ensure the Disqus section is loaded before the js runs.
css
#disqus_thread .publisher-anchor-color {
color: black !important;
}
js
$("#disqus_thread .publisher-anchor-color").css("color", "black !important");
or
$("#disqus_thread .publisher-anchor-color").removeClass("publisher-anchor-color);
Has anyone had a similar problem and managed to change the style.s
The disqus thread is get inside an iframe. You can't change the css of the frame content from the parent page. So this need to be resolved on disqus side - maybe there is an api option that you need to set.
Disqus link colors are inherited from your site's "a" defined color, change your css to define new link colors, and it will automatically pick it up
The final working solution :
<html>
<head>
<style>
#disqus_thread a {
color: red;
}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var embedVars = {
"disqusConfig":{"platform":"wordpress#4.3.1","language":""},
"disqusIdentifier":"5829 http:\/\/swiftcarbon.com\/?p=5829",
"disqusShortname":"swiftcarbon","disqusTitle":"CAROCAP: THE JOURNEY THUS FAR",
"disqusUrl":"http:\/\/swiftcarbon.com\/carocap-the-journey-thus-far\/",
"options":{"manualSync":false},"postId":"5829"};
/* ]]> */
</script>
<script type='text/javascript' src='http://swiftcarbon.com/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.3.1'></script>
</head>
<body>
<div id="disqus_thread">
<iframe id="dsq-app1" name="dsq-app1" allowtransparency="true" frameborder="0" scrolling="no" tabindex="0" title="Disqus" width="100%" height="100%" src="http://disqus.com/embed/comments/?base=default&version=9c6bf8c60a74cf4ced706cfda8a939f7&f=swiftcarbon&t_i=5829%20http%3A%2F%2Fswiftcarbon.com%2F%3Fp%3D5829&t_u=http%3A%2F%2Fswiftcarbon.com%2Fcarocap-the-journey-thus-far%2F&t_e=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_d=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_t=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&s_o=default&l=" style="width: 100% !important; border: 1px solid red !important; overflow: hidden !important; height: 475px !important;" horizontalscrolling="no" verticalscrolling="no"></iframe>
</div>
</body>
</html>
**// UPDATED ** And the debug :
I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle
I'm sure I am missing something obvious and I have checked the other questions regarding this but none seem to have exactly my issue. I am new to Javascript but I'm sure this is a very simple script to implement on a website. If I can get it to work I can edit it from there and see how it works to further enhance it or remove from it.
Here is my code so that you can see exactly how i have it in the .html file
<!DOCTYPE>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="css/nanoscroller.css">
<script rel="text/javascript" src="js/jquery.nanoscroller.min.js"></script>
<style type="text/css">
/* START NanoSlider */
.nano { background: #bba; width: 500px; height: 500px; }
.nano .content { padding: 10px; }
.nano .pane { background: #888; }
.nano .slider { background: #111; }
/* END NanoSlider */
</style>
<script>
$(document).ready(function(){
$(".nano").nanoScroller();
});
</script>
</head>
<body>
<div id="about" class="nano">
<div class="content">
This is the content box and it should be scrolling but it is not!! =/.
</div>
</div>
</body>
</html>
Here is a JSFiddle: http://jsfiddle.net/fcJr3/1/
Maybe I am linking in or refering to required files wrong? or possibly NOT linking in or referring to all the files I am suppose to?
As you can see in the JSFiddle I only get the box. I don't get the scroll bar or any of the effects. Your help is greatly appreciated, thanks!
EDIT: this is the nanoSlider here: http://jamesflorentino.github.io/nanoScrollerJS/
You need to include the jQuery library itself. You can download it or run it straight from the google cdn i.e.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
In your fiddle you need to include jquery using the dropdown top left i.e.
http://jsfiddle.net/fcJr3/2/
I am setting up a website like this (vertical slideshow almost):
http://mikelegacywebdesign.com/scrollpage_test/index.html
The one thing I am looking to do that I can't figure out is how to make the scrolling SNAP to the point where the color change is while scrolling.
For example, when scrolling, you get to about 50-100 px near the top of the next color you are scrolling to, it would be nice if that would snap to that point, instead of just continuing to scroll, because it is hard to get that "frame" to perfectly align. It's dependent on the user to scroll the perfect amount so that they are viewing the full frame, and not pieces of the former or next frame in the sequence.
Anyone that knows if there is a jQuery plugin or something for this would be my hero.
Here is the ENTIRE page so far. It's simple coding to get the current effect:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Scrollpage Test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; width: 100%; }
.container { height: 400%; width: 100%; }
.section { height: 35%; width: 100%; }
#section1 { background-color: #1d9ad7; }
#section2 { background-color: #c83e3d; }
#section3 { background-color: #75b946; }
#section4 { background-color: #f4be2f; }
</style>
</head>
<body>
<div class="container">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
</div>
</body>
</html>
Yes, it's possible. Their code is quite awful though. While animating scrollTop, you'll want to make sure that additional user-input that normally leads to scrolling is ignored. Have a look at this test-case to get an idea about how to prevent a user from scrolling.
You can get the desired effect using the
scroll() jumpScroll() scrollBy()
and a little bit of your own code.
For example,
function jumpScroll() {
window.scroll(0,250);
}
Would scroll to that point on the page
I was after the same thing so asked a similar question a few weeks ago. I found an addon called stellar.js that had the functionality but the demo was in horizontal and I couldnt for the life of me change it to vertical. Anyways, someone posted a solution, which I edited for mousescroll instead of click: http://jsfiddle.net/djsbaker/dxzk4/
On a site note, I had issues with it being quite laggy with huge fixed background images. In fact very laggy, but I was using parallax which didn't mix well.