I have been trying to use unslider (jQuery) on a project of my own. Despite following the instructions on the https://idiot.github.io/unslider/ website, I can't seem to get things to work.
Would anyone be kind enough to take a look at my code and give some feedback as regards to what can be going wrong here?
Thanks!
--
<!doctype html>
<html>
<head>
<title>Testing unslider</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/unslider-master/dist/css/unslider.css">
<link rel="stylesheet" href="/unslider-master/dist/css/unslider-dots.css">
</head>
<body>
<div class="my-slider">
<ul>
<li>My slide</li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/unslider-master/src/js/unslider.js"></script>
<script>
jQuery(document).ready(function($) {
$('.my-slider').unslider();
});
</script>
</body>
</html>
I'm assuming you're running this locally (you're not serving this through a web server). If that's the case, here's what you need to fix:
First, You need to get rid of the forward slash in your unslider asset URL's. Using the forward slash means that the browser will look for the file relative to the root of the URL which is not what you want. Instead, you want the browser to look for the file in the current directory.
Second, use https for the protocol in the jQuery asset URL to fetch it directly from the web. \\ is useful because it allows the URL to be protocol independent when making the request from a server that may or may not use https. However, when you're fetching files from your file system you'll end up with a URL like file://code.jquery.com/jquery-2.1.4.min.js which will fail because jQuery is not on your machine.
Here's a working version:
<!doctype html>
<html>
<head>
<title>Testing unslider</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="unslider-master/dist/css/unslider.css">
<link rel="stylesheet" href="unslider-master/dist/css/unslider-dots.css">
</head>
<body>
<div class="my-slider">
<ul>
<li>My slide</li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="unslider-master/src/js/unslider.js"></script>
<script>
jQuery(document).ready(function($) {
$('.my-slider').unslider();
});
</script>
</body>
</html>
Related
I need to log on site, and parse info.
I am trying to do this: powershell invoke-webrequest to log into website
But I can not find the form...
If I use function view page source in the browser I see only:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#ffffff"><link rel="icon" href="/frontend/favicon.ico">
<link href="/frontend/css/99.ad9d8c.css" rel="stylesheet"><link href="/frontend/css/style.aa5ad6.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
<script src="/frontend/js/modules/vendors~index.ad9d8c.chunk.js"></script>
<script src="/frontend/js/index.275be7.bundle.js"></script>
</body>
</html>
Update
I am try next, but this not work for me.
$ieObject = New-Object -ComObject 'InternetExplorer.Application'
$ieObject.Navigate('http://XXX.XXX.XXX.XXX:8090/frontend/login')
$currentDocument = $ieObject.Document
$currentDocument.IHTMLDocument3_getElementsByTagName("input") | Select-Object Type,Name
Error
You cannot call a method on a null-valued expression.
Hi I'm trying to learn javascript, from these tutorials: https://javascript.info/searching-elements-dom, but I've got stuck and not been able to find a solution to the issue. Apologies if this is a recurring question, but I was not able to find a solution using google, all the answers were that the script needed to be at the bottom of the page which I have. Basically, this works fine:
<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">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
But putting the javascript in a separate file like I have will all the other lessons so far. Both .html and .js are in the same folder.
index.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">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script src="main.js"></script>
</body>
</html>
main.js:
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML);
}
The browser gives me this error:
Uncaught TypeError: elements is not iterable
file:///home/me/javascript/main.js:26
main.js:26:18
I assumed I must have made an error somewhere, so I cut and pasted straight out of the tutorial to make sure I had not made a syntax error, but still it works if inside the html file and not if it's in it's own separate javascript file. How can this be fixed, I'm fairly sure querySelectorAll is exactly what I need for my site, but I want the javascript in a separate file to keep my code consistent.
Hi i am trying implement DRY by using jQuery load(). I want to have navbar.html that is on each page and is called by load() rather than having it on each html. All my files are in the same directory at the moment but I cannot seem to make the navbar load on the services page. please see my code below. I think there is a simple solution maybe its my syntax.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A_D Acupuncture in Amsterdam | Best In Amsterdam</title>
<meta name="description" content="A_D Ac upuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:title" content="A_D Acupuncture in Amsterdam | Best In Amsterdam">
<meta property="og:image" content="facebook-card.jpg">
<meta property="og:description" content="A_D Acupuncture is one of the best acupuncturists in Amsterdam. Make an appointment to get the very best service.">
<meta property="og:site_name" content="A_D Acupuncture"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lora:700|Merriweather" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js" async=""></script>
hello world /* test */
<-- Navbar.html -->
<div class="navbar-ad">
<div class="navbar-logo">
<img id="logo" src="../images/logo.png">
</div>
<div class="navbar-right">
Home
Services
Contact
</div>
</div>
$(document).ready(() => {
$("#nav-placeholder").load("navbar.html");
$('#h1').html("heeey") /* test line to make sure filepath is correct */
});
I have an index.html and edit.html and trying to do the following, but by clicking the second and third link, the emulator showed me an error saying: Application Error, A network error occurred (file://android_asset/www/edit.html?id=2) and (file://android_asset/www/edit.html?id=3)
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body id="stage" class="theme">
<h1>Welcome to XXX!</h1>
1
2
3
</body>
</html>
my edit.html is just a html header and body.
Any idea why?
Yes, this is a bug in Android not PhoneGap. Go star this Google issue to add your voice:
http://code.google.com/p/android/issues/detail?id=17535
In other news we believe we will have a work around in the 1.9.0 release which will be out at the end of the month.
I'm trying to get lightbox to run on my gallery. Jquery works since I tested it by having an alert() in the documet.ready() function. But besides that lightbox doesn't seem to work. Or at least I only the links work normally. Here's my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="ROBOTS" content="ALL" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href="/fuelcms/assets/css/klang.css?c=943916400" media="all" rel="stylesheet"/>
<base href="http://localhost/fuelcms/index.php" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="robots" content="index, follow" />
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/lightbox/prototype.js"></script>
<script type="text/javascript" src="assets/js/lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="assets/js/lightbox/lightbox.js"></script>
<link rel="stylesheet" href="assets/css/lightbox.css" type="text/css" media="screen" />
</head>
<body class="gallery index">
<!--<div class="header"><ul>
<li class="first">Repertoire</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Agenda</li>
<li>Gallerie</li>
<li class="last">Links</li>
</ul>
</div>-->
<ul>
<li class="first">Repertoire</li>
<li>Über uns</li>
<li>Kontakt</li>
<li>Agenda</li>
<li>Gallerie</li>
<li class="last">Links</li>
</ul>
<div class="fullpage">
<div class="colmask">
<div class="col3">
<div class="pagination">‹ First < 7 8<strong>9</strong></div><br><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Gong.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Gong_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Fatamorganaschatten.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Fatamorganaschatten_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Bumentopf2.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Bumentopf2_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopfdynamik.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopfdynamik_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blumentopf.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blumentopf_thumb.jpg" alt=""/></a></div><div class="imagebox"><a rel="lightbox[col]" href="assets/images/fotos_site/Blument1.JPG"><img src="http://localhost/fuelcms/assets/images/fotos_site/thumbs/Blument1_thumb.jpg" alt=""/></a></div></div></div><div class="footer" />
</body>
</html>
I've also tried with the script tag in the head tag but no difference, please help.
greez almightybob
you are coding in XHTML (using self-closing tags) but not declaring the XHTML doctype. check this question in SO
<link>,<meta> and <base> are self-closing by itself, however, <script> should always be closed by a </script> for safety measures, regardless if external or internal. my IDE (Aptana Studio 3) does it that way (knowing it has built-in validation, it must be "best-practice" in my opinion)
although not sure but i think you can omit the # when selecting the lightbox using the latest jQuery: $('a[rel*=lightbox]').lightBox()
how long ago was 1.4? try a more recent jQuery version!
I've had this problem before and solved it by putting the following right before the ending body tag:
<script>
$.noConflict();
</script>
Maybe that will help you out.
Note: this worked for me using the most recent jQuery (1.7.1) hosted on Google's CDN, and with Lightbox 2.05 located here. Are you using a different Lightbox implementation? If not, you are definitely holding on to very old versions of both jQuery and Lightbox.