I'm trying to run two Jquery scripts, one called balancedgallery and the other museum. When I run each script by themselfs they run fine but together the balancedgallery script doesn't allow the Museum script to link the viewer and instead links directly to the image.
This could be because they are old scripts from 2014 and 2017 and some standards have changed? I had to update the ".load" to ".on('load')" for the balanced gallery reference. Though both the scripts are running fine (with no console errors). If I put "#msm-gallery-2" at the end of the url (2 being the image number) the viewer (Museum) displays.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="content">
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped1.jpg"/>
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped2.jpg"/>
<img src="https://www.ryanepp.com/assets/demos/balanced_gallery/moped3.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/enzzzooo/balanced-gallery/jquery.balanced-gallery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/enzzzooo/museum/jquery.museum.js"></script>
<script>
$(document).ready(function() {
$.museum($('#content img'));
});
</script>
<script>
$(window).on('load', function () {
$("#content").BalancedGallery({});
} )
</script>
</body>
</html>
Not sure if this is affecting your scripts at all, but you have an unclosed tag on line 1 - set this to <!DOCTYPE html> <html lang="en-US">
and your last "img" tag is unclosed, which could be merging the div holding the scripts inside your last image.
Related
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I would like to convert this html script into a chrome extension. I followed this short tuto and apparently, I should move all the script ●parts into a .jsfile:
Due to security constraints, we can’t put inline JavaScript into our
HTML files inside of our Chrome extensions, so we have to create a
separate file to hold any JavaScript code we need and we’ll reference
it from the HTML file.
So instead of having just this html:
<!DOCTYPE html> <html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body> </html>
I should have one html ...:
<!DOCTYPE html>
<html>
<body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
</html>
...and one .js. But I am not sure how to go with the .js. How shoudl I call the script //translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en. Also should I add the function googleSectionalElementInit inside a document.addEventListener function?
Also will the script work because it will be stored on my local computer and not a server?
I am playing around with Laravel last version, trying to import and use JS files on the front-end. I have them stored in my folder 'public/js/'.
I have this Blade template you can see below, pizza.blade.php. If you inspect the page source, you can clearly see the JS files are existing, since their links, which are regularly working, are "http://localhost:8000/storage/...".
Nevertheless, they are not working inside the document and, inspecting the network tab, I can see they are not imported.
The image, pizza.png, located in 'public/storage' is displaying correctly.
What am i doing wrong?
Also, is there a better practice to use JS files, such as mix or npm? Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
<script>src="{{ asset('/js/test.js') }}"</script>
<title>Document</title>
</head>
<body>
<h1 class="ciao">PIZZA LOGO</h1>
<div>
<img src="http://localhost:8000/storage/pizza.png" alt="">
</div>
</body>
<script>
$(document).ready(function () {
$(".ciao").css('display', 'none');
});
</script>
</html>
You have this error
<script>src="{{asset('/js/jquery-3.3.1.js')}}"</script>
this is just script with single javascript variable and string inside. You need this:
<script src="{{asset('/js/jquery-3.3.1.js')}}"></script>
this is html script tag with src attribute.
New to HTML and javascript. I'm trying to update a number that changes in another program without having to refresh the entire webpage using javascript. My home html page is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<script type="text/javascript" src="Scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
Counter
<div id="counter"><h2>0</h2></div>
<button>Update</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#counter").load("value.html #count");
})
});
</script>
</html>
When I press the button, nothing changes. value.html contains:
<div id="count">:="DB1".counter:</div>
which is just an int value that counts up every second. If I load up this page, it shows the correct int value. But for some reason, the id="counter" never updates on the main html page. I've tried on chrome and internet explorer with no luck. Any help would be greatly appreciated.
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".