Trying to add a "scroll to top" button to fade in when I scroll down the webpage. Doesn't want to know, I've applied this exactly another webpage and works fine, on this web page, it just doesn't want to know. What am I doing wrong?
The script & style sheets are separate & attached in the head section, they do not make up the document body of the webpage.
Long time,
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="../styles/alternate-styling-sheet.css" rel="stylesheet" type="text/css">
<head>
<body>
<div id="scroll-to-top-button">
Top<i class="fa fa-caret-up" aria-hidden="true"></i>
</div>
</body>
<html/>
/----------------------------------/
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}
});
</script>
/---------------------------------------/
<style>
#scroll-to-top-button{
right:20px;
bottom:20px;
display:none;
background-color:#3A83F3;
position:fixed;
border-style:none;
border-radius:5px;
width:100px;
z-index:99999999999;
}
#scroll-to-top-button a{
padding:10px;
display:block;
color:white;
font-size:17px;
text-decoration:none;
}
#scroll-to-top-button a:hover{
background-color:#81AFED;
border-radius:5px;
}
#scroll-to-top-button a i{
padding-left:10px;
float:right;
}
</style>
If the script is part of the js you are calling first, that may be your problem. You have to load jquery first. If you run developer tools, you will probably see in the console that it fails at "$(window)".
First of all move jquery libs to the top of custom scripts
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/AltScript.js"></script>
And for fade in using js you can follow this links.
It is well explained -
Fade In on Scroll Down, Fade Out on Scroll Up
Since I answered first, I will reply to your comment to the other answer that is similar to mine:
It isn't stupid, as javascript - unless dynamically loaded - loads in the order listed. Since jquery is just a javascript library, it has to load before you can call any jquery functions.
It is possible that your other code had inherited jquery some other way. It would be hard to tell without context.
Load your jQuery library script above your personal script by putting it on the line above it
Try using this:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150){
$('#scroll-to-top-button').slideDown();
}});
});
</script>
But it does appear that DaniP's fiddle is working correctly: https://jsfiddle.net/by49ph5s/
Related
For example:
I have a page and the code is:
<!DOCTYPE html>
<html>
<head>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap">link</div>
</body>
</html>
And I have a common JavaScript component which will load a CSS file include the code below:
.wrap .link { color: blue; }
Then the link will change from red to blue.
Use iframe can fix this but cause another problem same like display two scrollbar or the lightbox overlay just in part of the page.
I can not change the CSS but I can write a JS loader so do you have some idea to fix this?
If a selector matches then a rule will apply until overridden by a rule (which sets the same property) further down the cascade.
You can either change your selectors to stop them matching the elements you don't want them to match, or you can override all your rules in that section.
Therefore, you'll have to adapt your markup and styles. You can precede every selector with #wrapper. For example, if a rule says a{color:red}, substitute that with #wrapper a {color:red;}.
HTML5 allows scoped stylesheets, but only Firefox supports it so far. However there is a you may try a jQuery solution: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin.
Hope it helps.
This might help you.
function changeColor(){
jQuery(".link").css('color','blue');
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.wrap a {
color: red;
}
</style>
</head>
<body>
<div class="wrap"><a href="#" class="link" onclick='changeColor()'>link</a></div>
</body>
</html>
i am trying to create a fiddle which includes an external css style sheet and an external javascript file which .it had an option in the left panel called external resources.how this option can be used to add those external files?do i need to upload the external files to somewhere.if i need to would you please give me the link where i can upload this.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="games.css">
</head>
<body>
<div id="mydiv">
<canvas id="mycanvas1"></canvas>
<canvas id="mycanvas2"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
*{margin:0px;padding:0px;}
#mydiv{
width:100%;
height:100%;
background-color:black;
}
#mycanvas1{
width:500px;
height:500px;
background-color:white;
border:1px solid white;
}
If you want to load an external resource in JsFiddle you need to place it somewhere that JsFiddle can find it.
For example, if you have a website http://www.example.com you could place your external file in the web root so that it has a URL of http://www.example.com/resource.css. That's the value you put in the external resources field on JSFiddle.
You'll need to upload your files to somewhere - JSFiddle doesn't have access to your hard disk. Where you put it is something you'll have to decide for yoursefl.
If you refer something like jquery plugins or jquery ui or simply jquery plugin and other optional css which are taken from other websites where you would like to use it for your reference in your page you need to add those links which you are seeing it on you left side of jsfilddle.
For ex: <script src="http://somewebsite.com/yourfile.js"></script>
you need to add "yourfile.js" to your hosting server and the refer it as
http://somewebsite.com/yourfile.js in the exernal js file in fiddle
i've copied a very basic script from the Jquery Waypoints website,
all i want it to do at the moment, is when #header reaches the top of the viewpoint, an alert would pop up.
i've loaded the scripts in this order
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="waypoints/waypoints.min.js"></script>
<script language="javascript" type="text/javascript" src="jscript.min.js"> </script>
And this is the element that i want to have the waypoint (#header)
<div id="header">
<h1>Header</h1>
</div>
This is the CSS for #header, which is probably not needed for this question
#header {
height:75px;
width:auto;
position:absolute;
background:#212121;
top:50px;
left:200px;
right:100px;
}
And then the very simple jQuery script, which is the same script (with a different element name) from the site http://imakewebthings.com/jquery-waypoints/
$('#header').waypoint(function() {
alert('Top of header hit top of viewport.');
});
When i check it on chrome, and scroll past the header, no alert comes up, and no errors are shown in the console.
Please help me to understand my mistakes here,
Thanks.
I've managed to get it to work by adding a document ready function
so the script would now look like this:
$(document).ready(function() {
$('#header').waypoint(function() {
alert('Top of header hit top of viewport.');
});
});
I want to make an text animation with JQuery but I dont know how should i start and how should i code this. Actually what/where to google it.
If you look at http://www.apple.com/stevejobs/ you see that text are moving and the last is added to the top with nice fadeout and so on.
Could you help me to give an example/ scratch of doing it in JQuery Ajax and html.
I want to implement it in Python as backend and in the front use Ajax ,JQuery, Javascript and so on. please give hint that which one is better.
Thank you
Put text in <div>s
Use jQuery's effects to show, hide, and animate the text.
Optionally add jQuery UI's easing effects and use something like the easeInOutCubic easing function.
This should get you started atleast with the effect.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; }
#one { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="one"></div>
<div></div>
<div></div>
<script>
//sets a timer to 1sec
$(document).ready(function () {
window.setInterval(yourfunction, 1000);
});
//goes to a php file and return data to be appended to your div.
function yourfunction() {
$.get("test.php", function(data){
$("#one").html(data)
$("#one").slideDown("slow");
});
}
</script>
</body>
</html>
timer thanks to Kristof Claes and here more info on the jquery get() function. My recommendation for you is to map out a logic of what you want to accomplish, and search for how it might be called and start forming piece by piece your result..That's what I do, I'm no expert in jquery but i have an idea and thanks to great people in in S.O. and google I am able to accomplish awesome things.
I have a jquery toggler on the very top of my page that will eventually open up to reveal a form. The problem is that when the panel expands it will push down all the content under it instead of the panel going over the content. How do I make sure the panel expands over the content instead of pushing it down?
I only have the basic slidetoggle function set up:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>this will be a form</p>
</div>
<p class="flip">sign up!</p>
</body>
</html>
You can try something with position:absolute.
Check out this jsfiddle.
As partkyle said, use absolute positioning, and you will probably also want to also use z-index "layering" in your css to specify which element shows on top.