Why isn't my web page transition working? (HTML, CSS, JavaScript) - javascript

Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.

Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});

Edit; sorry you already did that.
Try puttting your js file Under the js library file.

Related

should preloader be inside DOMContentLoaded or load event

I want to add a preloader to my website untill the website is fully loaded images, js, fonts everything but I'm confused which should I use
window.addEventListener('DOMContentLoaded', () => {
// code
});
or
window.addEventListener('load', () => {
// code
});
And if I used load or DOMContentLoaded should I stop using defer for my script files?
And also if I have imported modules should it be outside the event? For example:
import { gsap } from "gsap";
window.addEventListener('DOMContentLoaded', () => {
// code
});
I use this preloader code for my website. You can check this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="preloader" style="position: fixed; left: 0; top: 0; z-index: 999; width:
100%; height: 100%; overflow: visible; background: #333 url('pre_loading.gif') no-
repeat center center;"></div>
<div id="container" style="display:none;">your page content here</div>
<script>
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
$('#container').show();
});
</script>
</body>
</html>
You can hide the preloader when the event you choose is triggered.
defer attribute
This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
The DOMContentLoaded event will fire as soon as the DOM hierarchy has been fully constructed, the load event will do it when all the images and sub-frames have finished loading.
You could also read the documentation...
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

JavaScript erratic with starting point funciton

fairly new to js. I have a simple project in which all I have is an image twice the height of the screen. I want the webpage to open at the bottom of the page, so I have added the "window.scroll" funtion method in javascript. This works fine... most of the time. Sometimes, particularly if I test on a mobile device with a home server, the javascript just doesn't fire up and the page starts at the top. So my main question is: is there a way to do the same as "window.scroll" but with CSS, bypassing js altogether? And a second question I would have is, why is javascript so flaky? I am really new to web development and I have already twice (the other time with the "slide" method) had to use css instead of js because js doesn't work properly, or it needs to be cached etc... is this normal behaivour or just me really bad at writing it at this point? Thanks for your time. P
Here's the simple code:
$(document).ready(function(){
window.scroll(0,2000);
});
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;">
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
JavaScript:
$(document).ready(function(){
window.scroll(0,2000);
});
I think the problem is that the image takes time to load.So I think your event is fired however the image loads later and changes the page size again. The load event will fire after images are loaded.
try this code instead:
$(window).on("load", ,function(){
window.scroll(0,2000);
});

Trouble linking javascript from external file to HTML [duplicate]

I'm pretty new to JS and jQuery, and i'm trying to make a subtitles player using them. Unfortunately, i'm stuck in a very early stage.
When I'm trying to select some HTML elements through a .js file, it acts like it can't locate the element I'm asking for, and nothing happens. If I try to alert the value or the HTML of the elements, it alerts undefined.
So this is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="jquery-2.1.3.min.js"></script>
<script src="script.js"></script>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#wrapper{
width: 150px;
text-align: center;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#75bdd1), color-stop(14%,#75bdd1), color-stop(100%,#2294b3));
padding: 10px 2px;
}
h3{
font-family: Arial, Helvetica, sans-serif;
}
img{
width: 50px;
margin: 0 auto;
}
input{
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<h3>Select subtitles file</h3>
<img src="browse.png" alt="browse">
</div>
<input type="file" accept=".srt" id="file">
</body>
</html>
script.js
$("div").click(function () {
console.log('loaded');
});
Thanks.
Because your script tag is above the HTML defining the elements that it acts on, it can't find them because they don't exist as of when that code runs. Here's the order in which things are happening in your page:
The html and head elements are created
The meta element is created and its content noted by the parser
The script element for jQuery is created
The parser stops and waits for the jQuery file to load
Once loaded, the jQuery file is executed
Parsing continues
The script element for your code is created
The parser stops and waits for your file to load
Once loaded, your script code is run — and doesn't find any elements, because there are no div elements yet
Parsing continues
The browser finishes parsing and building the page, which includes creating the elements you're trying to access in your script
Ways to correct it:
Move the script elements to the very end, just before the closing </body> tag, so all of the elements exist before your code runs. Barring a good reason not to do this, this is usually the best solution.
Use jQuery's ready feature.
Use the defer attribute on the script element, but beware that not all browsers support it yet.
But again, if you control where the script elements go, #1 is usually your best bet.
When you call the .click() method the dom is not fully loaded.
You have to wait till everything in DOM is loaded.So you have to change your script.js to this:
$(document).ready(function(){
$("div").click(function () {
console.log('loaded');
});
});
You should execute your script after DOM Ready event. In jquery it makes so:
$(function(){
$("div").click(function () {
console.log('loaded');
})
});
$(document).on('click', "element" , function (ev) {
console.log('loaded');
})
})

jQuery show/hide won't working in wordpress

I am cluless about this since I am a begginer, I have created this template for wordpress, my customer wanted to show a youtube video when you click on the respective play button on each image:
http://oxfordandregentstreet.com/
Now this is the code I made for it:
On the header I put this function
enter code here
On the header I put this function
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(){
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(){
jQuery(".vid1").hide();
});
});
</script>
enter code here
CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}
.videos{
position: relative;
display: none;
}
.play1{
position: relative;
bottom: 9em;
left: 8em;
}
enter code here
HTML code on the page:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<table border="0" align="center">
<tbody><tr>
<td><img src="/wp-content/uploads/2015/02/Constant-Contact- 290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt="" width="" class="play1"></td>
</tr>
</tbody></table></div>
<div class="videos">
<div class="vid1">Close X<iframe width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw" frameborder="0" allowfullscreen></iframe></div>
</div>
I test this code on the first play button but nothing happens, chrome's console doesn't show any errors, and I am using "Use Google Libraries" to include the code.
Can you please help me with this guys, I have researched the internet for days and I haven't found any solution.
Thanks in advance :)
There's a few issues I can see:
CSS
Remove display: none; from .videos since you're always hiding everything inside that container. Instead, change your existing CSS to include it:
.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
position: absolute;
bottom: -1.5em;
left: .3em;
display: none; /* added here */
}
Code
The play button class is play1 so, your code to show vid1 should be:
jQuery(".play1").click(function (e) {
e.preventDefault();
jQuery(".vid1").show();
});
The close button is already inside vid1 so just hide the container when closevid inside vid1 is clicked:
jQuery(".vid1 .closevid").click(function (e) {
e.preventDefault();
jQuery(".vid1").hide();
});
Make sure you are calling jquery before running your script. You also need to prevent default when adding click events to anchor tags
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(e){
e.preventDefault();
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(e){
e.preventDefault();
jQuery(".vid1").hide();
});
});
</script>
(1) Have you included the jQuery library? Generally, it is included in the <head> section, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Ref: http://learn.jquery.com/about-jquery/how-jquery-works/
(2) Inside the jQuery document.ready wrapper, put an alert.
<script type="text/javascript">
jQuery(document).ready(function(){
alert("It works");
});
</script>
If it pops up, then there are no syntax errors in the rest of your code. If it does not pop up, then delete everything except the alert statement (again, still within the document.ready wrapper -- make it look exactly like the above) and try again.
Make just that one thing work, then add back in the other parts, bit by bit.

why doesnt this animate() jquery function script work?

I'm trying to test out how the animate() function works, and this is an example I got from stackexchange actually (it works on fiddle), but when I run it on my local computer, it doesn't work anymore.
Here's the code:
<html>
<head>
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function () {
$('div').animate({
width: 'toggle'
});
});
alert("hei");
});
</script>
<style type="text/css">
div {
background-color: red;
height: 100px;
width: 100px;
display: none;
}
</style>
</head>
<body>
<button>Show/Hide</button>
<div></div>
</body>
Why is this? When I refresh, there's no alert popping up so it's not even processing the javascript I have in there. But it works fine in fiddle.
Oh, and here's the fiddle. But I really don't think it's relevant since it works there, just not on my local computer. Am I missing declaring a library?
Please change below line :
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
with this one :
<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
You have used backslash instead of slash
It work For me
I think your jQuery path is not correct you have used
scripts\jquery-1.11.0.js
normally we used scripts/jquery-1.11.0.js
scripts\jquery-1.11.0.js should be scripts/jquery-1.11.0.js

Categories

Resources