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.');
});
});
Related
I'm using a code for a GPA Calculator widget to run on my website, it was working fine, but now, it seems that it is changed from the source, and became unresponsive.
I've asked them for a new code with no response from their side.
Now, I'm trying to fix this from my side, and need your help!
Code:
<!-- Calculators.tech Widget -->
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;"><p>GPA Calculator provided by calculators.tech</p></div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js"></script>
Here is how it looks like:
Previously, it was more like this:
I don't want to have this scroll option, I want it to show a complete shape of the calculator.
Is there a way to edit this from my side till I get any response from the calculator developer?
Looks like they have removed height attribute on iframe. Try this script below which tries to modify height on iframe when it finishes loading
<!-- Calculators.tech Widget -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function renderCalc() {
setTimeout(function() {
$('iframe#ifr').css('height', '100%');
}, 3000)
}
</script>
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;">
<p>GPA Calculator provided by calculators.tech</p>
</div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js" onload="renderCalc()"></script>
onload event fires when DOM elements gets loaded but still there is no way to find when the assets get loaded like images etc of the document embedded in . For mitigating that issue the timer of 3 sec is used
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/
I am trying to change the content of a div on the page but the page has a lot of things to load and on slower computers there is a flicker where you can see the div changing (changing through jquery btw). Is there anyway that everything can be hidden and display it all at including the changes I made using jquery?
I had a similar issue with my web application.. This is what I did
Hide body in HTML
<body style="display:none">
And write this script :
$(window).bind("load", function() {
$("body").fadeIn(100);
});
OR this script
$(window).load(function () {
$("body").fadeIn(100);
}
This creates beautiful effect and shows the page ONLY after everything is fully loaded..
Perhaps you could do something like
<head>
<style>
body{
display:none;
}
</style>
</head>
<body>
flickery <div></div>s go here
</body>`
And your script
$(window).load(function(){
$(document.body).css("display","block"); //shows it when all the elements are ready for presentation
});
I have this little bit of code for a fade in effect but for some reason firefox is not picking up the which I need because the fade it doesn't work for firefox. What am I missing to get this to work?
<noscript>
</style>
<style type="text/css">
body {display:inherit !important;} /*if they haven't got javascript we need to show the body
</style>
</noscript>
<script type="text/javascript">
$(document).ready(function() { $("body").fadeIn(1500);});
</script>
the css
body {
background-color:#000;
overflow-x:hidden;
-webkit-text-size-adjust:100%;
display:none;}
You can't have a <noscript> tag anywhere but the <body> section of your document, and you can't have a <style> tag anywhere but the <head> section of your document (see this post).
An alternative way to do this would be to make the body tag default to display: visible and set the display property using JavaScript like so:
<body>
<script type="text/javascript">document.body.style.display = "none";</script>
...
</body>
Then get rid of your <noscript> tag completely and remove the display:none; line from your CSS declaration.
The advantage of this is that if the browser doesn't have JavaScript enabled, your <body> tag will be visible, regardless of how the browser handles the <noscript> tag.
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.