Javascript not showing up - javascript

I'm working on a index.html file that was previously created by DNN (Dot Net Nuke).
I've put a Javascript Slideshow Banner in where there was previously an SWF Slideshow banner. The problem is the javascript is not showing up.
Here's what the problem (i.e. banner not showing) looks like: http://www.drkachooie.ca/index.html
Note: When I upload an html with just the flash banner it shows up (http://www.drkachooie.ca/rice.html), so something must be overlapping it, right?
My question is: How can I adjust my code to make my javascript show up? If someone can check the code out, and see what's wrong, I would greatly appreciate it.
Here's the javascript (Correction: HTML & CSS) in the body tags of the index.html document:
<div id="mhrotator">
<style type="text/css"> #mhrotator img { display:none; } </style>
<img src="images/Bitmap1.jpg" title="Bitmap1" />
<img src="images/Bitmap2.jpg" title="Bitmap2" />
<img src="images/Bitmap3.jpg" title="Bitmap3" />
<img src="images/Bitmap4.jpg" title="Bitmap4" />
<img src="images/Bitmap5.jpg" title="Bitmap5" />
</div>
Here's the javascript in the head tags of my index.html document:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mhrotator.js"></script>
<script type="text/javascript" src="js/initrotator.js"></script>
<link rel="stylesheet" href="js/mhrotator.css" type="text/css" />
Currently all the other pages of the website are using the old swf file as my banner. but the index.html file is currently using the javascript (which is not showing up)
Note: If you need any other information, feel free to ask!

The version that is working has the banner inside of a div element that is not being affected by <style type="text/css"> #mhrotator img { display:none; } </style> which is preventing the version that isn't working from showing the images.

I see this error in console :-
Uncaught TypeError: Cannot read property 'mhrotator' of null
at HTMLDocument.<anonymous> (initrotator.js:1)
at Function.ready (jquery.js:26)
at HTMLDocument.L (jquery.js:33)
Javascript is getting executed before div element mhrotator gets loaded.
Try placing below script tag after </body> tag.
<script type="text/javascript" src="js/mhrotator.js">

Related

LightGallery Video Plugin won't work (undefined $)

I am currently working on a webpage and tried implementing LightGallery. Although the image galleries work totally fine for me the videos won't seem to play.
When I check the console the following error message is displayed upon loading the site:
<Uncaught TypeError: $.fn.lightGallery is undefined
<anonymous> http://localhost/js/lg-video.js:352
<anonymous> http://localhost/js/lg-video.js:354
<anonymous> http://localhost/js/lg-video.js:17
<anonymous> http://localhost/js/lg-video.js:19
I am fairly new to using LightGallery and to finding out, what the problem in a JavaScript file is since I am not an 'expert' coder.
I used the code snippet from the lg-video plugin website to test it out:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
...
</head>
<body>
<script src="js/lightgallery.js"></script>
<script src="js/lg-video.js"></script>
<div id="lightgallery">
<a href="https://www.youtube.com/watch?v=meBbDqAXago" data-poster="video-poster1.jpg" >
<img src="img/thumb1.jpg" /></a>
</div>
<script>
lightGallery(document.getElementById('lightgallery'));
</script>
</body>
Here's a working JSFiddle. Here's what I did, working through the installation page I referenced yesterday:
Starting in the "Include CSS and Javascript files" section, they say to include lightgallery.css, though they don't give a link for it. I searched and found a CDN link, and added that ;
Added a CDN link to the latest jQuery;
Copied and added the 'jsdelivr collection' link for the Lightgallery JS;
Copied the JS they show to initiate the plugin;
Copied the relevant part of your HTML snippet - just the lightgallery div, with some minor updates:
Neither video-poster1.jpg nor img/thumb1.jpg exist here of course, so I replaced them with placeholder images;
I get "Video unavailable" for that video, so I randomly picked another;
This works fine - the placeholder thumbnail is shown, when I click it the video opens against a black background, and plays if I click play. Here's the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/lightgallery,npm/lg-autoplay,npm/lg-fullscreen,npm/lg-hash,npm/lg-pager,npm/lg-share,npm/lg-thumbnail,npm/lg-video,npm/lg-zoom"></script>
</head>
<body>
<div id="lightgallery">
<img src="https://via.placeholder.com/150" />
</div>
<script>
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
</body>
</html>

Using script tag to include JavaScript in program via a CSS file?

I have never seen this before. I have always included JavaScript in my HTML files. Is this jsfiddle doing it wrong or am I naïve?
http://jsfiddle.net/relly/jjwwd4mq/
CSS file in jsfiddle:
</style> <!-- remove this, it is just for jsfiddle -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<style>
.grid {
width: 500px;
height: 250px;
}
I have trouble googling the issue of using a <script> tag in a CSS file, it gets conflated with other issues like executing JavaScript in a CSS file.
Also, what part should be removed? Just the top line? I am baffled by the </style> followed later by another <style>...
Apparently jsfiddle implements their CSS/JavaScript sections simply using <style></style> and <script></script> tags inside an HTML file.

jQuery dialog jumps to bottom of page

I am using jQuery in order to create a custom popUp similar to a tutorial/tip for the end user (who can be on Chrome OR any other browser). However as you can see in the below image, the divs that contain my code have a large top which pushes my code down. While using Chrome's developer tools, I notice it would take -591px to have the popup where I want so I used the below code:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" />
<script>
function myFunction() {
$(function () {
$("#something").dialog();
});
$("#something").dialog({
top:-591
});
}
</script>
<div id="something" style="resize:both; display:none; background-color:yellow; height: 200px; width:200px;">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed.</p>
</div>
I tried several answers from this link but they didn't work. Also, I noticed when I comment out the first script line (jquery-2.1.11.min.js) it stops working, so it might have to do with that jQuery version?
Here is the screenshot from Chrome's Dev Tools:
The problem is that you have added js again instead of adding CSS
Change it to jquery-ui.css
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
DEMO

Jquery-ui dialog box 'x' button image is not visible

I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.

How to hide certain html that is not surrounded by <noscript> tags if javascript is disabled?

<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.

Categories

Resources