Can't get slick to work - javascript

This is the code
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="ISO-8859-15">
<meta name="viewport" content="initial-scale=1.0">
<title>NET2GRID Support Portal</title>
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="/slick/slick.min.js"></script>
</head>
<body>
<div class="slider">
<div>
<img src="/images/appliances/freezer.png" />
</div>
<div>
<img src="/images/appliances/electric_shower.png" />
</div>
<div>
<img src="/images/appliances/computer.png" />
</div>
</div>
<script>
$('.slider').slick({});
</script>
With this stylesheet:
.slider {
width: 650px;
margin: 0 auto;
}
img {
width: 200px;
height: 200px;
}
But this is the only thing I see on the page:
Am I using the slick carrousel correctly or am I using it wrong? I tried to follow the example in a jsfiddle but that doens't seem to work on my end.

Related

Show alert when link clicked

I am trying to show an alert when a link is clicked using jQuery like this..
$(document).ready(function() {
$(".nav_link").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
It isn't working for some reason, can anyone spot what I am doing wrong?
You don't have element with class name of nav_link. Use navlink instead:
$(document).ready(function() {
$(".navlink").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">Link 1</a>
<a class="navlink" id="navlink2" href="#">Link 2</a>
<a class="navlink" id="navlink3" href="#">Link 3</a>
try this
$(document).ready(function() {
$(".navlink").click(function(e) {
e.preventDefault();
alert('clicked');
});
});
You are using .nav_link class selector in your jQuery selector while your tags have navlink class. you should change it to navlink like the following :
$(document).ready(function() {
$(".navlink").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
OR you should change your a tags classes from navlink to nav_link like :
$(document).ready(function() {
$(".nav_link").click(function() {
alert('clicked');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="nav_link" id="navlink1" href="#">
Link 1
</a>
<a class="nav_link" id="navlink2" href="#">
Link 2
</a>
<a class="nav_link" id="navlink3" href="#">
Link 3
</a>
You are clicking on a link ie the anchor tag, which itself has a native handling whenever a click event is called upon the anchor tag. So, for making your click handling work you have to cancel the default handling by preventing the default behaviour of anchor tag for a click event.
As you need to prevent the default action , so pass the event as a parameter in the callback function of jquery click handler.
As.
(‘anchor-tag-class’).bind( ‘click’, function(event) {
event.preventDefault();
Do your processing
});
here is the code for it:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(".navlink").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="navlink" id="navlink1" href="#">
Link 1
</a>
<a class="navlink" id="navlink2" href="#">
Link 2
</a>
<a class="navlink" id="navlink3" href="#">
Link 3
</a>
</body>
</html>
<script src="" async defer></script>
</body>
</html>
check fiddle:https://jsfiddle.net/e9Ljou4q/
hope that worked
Why don't you do this:
$('a').click(function() {
alert('clicked');
});

REST Api returns Captcha

I'm trying to consume a bitcoin price history rest web service (https://www.coindesk.com/api/) using the URL https://api.coindesk.com/v1/bpi/historical/close.json.
It works fine when I enter the previous URL in my browser, but when I use Node/Express to get the data and then resend it, with the code below it doesn't work, When I send a GET request to m Node/Express server with Postman I get the HTML result at the bottom of this post which looks like a Captcha:
Node/Express code:
const express = require('express');
const request = require('request');
const router = express.Router();
router.get('/bitcoinPrices', function(req, res) {
request('https://api.coindesk.com/v1/bpi/historical/close.json', function (error, response, body) {
console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
console.log('body:', body); // Print the HTML for the Google homepage.
res.send(body);
});
});
module.exports = router;
Response after a GET request to http://localhost:3000/api/bitcoinPrices:
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js ie6 oldie" lang="en-US">
<![endif]-->
<!--[if IE 7]>
<html class="no-js ie7 oldie" lang="en-US">
<![endif]-->
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en-US">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html class="no-js" lang="en-US">
<!--
<![endif]-->
<head>
<title>Attention Required! | Cloudflare</title>
<meta name="captcha-bypass" id="captcha-bypass" />
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<link rel="stylesheet" id="cf_styles-css" href="/cdn-cgi/styles/cf.errors.css" type="text/css" media="screen,projection" />
<!--[if lt IE 9]>
<link rel="stylesheet" id='cf_styles-ie-css' href="/cdn-cgi/styles/cf.errors.ie.css" type="text/css" media="screen,projection" />
<![endif]-->
<style type="text/css">body{margin:0;padding:0}</style>
<!--[if lte IE 9]>
<script type="text/javascript" src="/cdn-cgi/scripts/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 10]>
<!-->
<script type="text/javascript" src="/cdn-cgi/scripts/zepto.min.js"></script>
<!--
<![endif]-->
<script type="text/javascript" src="/cdn-cgi/scripts/cf.common.js"></script>
</head>
<body>
<div id="cf-wrapper">
<div class="cf-alert cf-alert-error cf-cookie-error" id="cookie-alert" data-translate="enable_cookies">Please enable cookies.</div>
<div id="cf-error-details" class="cf-error-details-wrapper">
<div class="cf-wrapper cf-header cf-error-overview">
<h1 data-translate="challenge_headline">One more step</h1>
<h2 class="cf-subheadline">
<span data-translate="complete_sec_check">Please complete the security check to access</span> api.coindesk.com
</h2>
</div>
<!-- /.header -->
<div class="cf-section cf-highlight cf-captcha-container">
<div class="cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<div class="cf-highlight-inverse cf-form-stacked">
<form class="challenge-form" id="challenge-form" action="/cdn-cgi/l/chk_captcha" method="get">
<script type="text/javascript" src="/cdn-cgi/scripts/cf.challenge.js" data-type="normal" data-ray="3e6fb7629a536938" async data-sitekey="6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0"></script>
<div class="g-recaptcha"></div>
<noscript id="cf-captcha-bookmark" class="cf-captcha-info">
<div>
<div style="width: 302px">
<div>
<iframe src="https://www.google.com/recaptcha/api/fallback?k=6LfBixYUAAAAABhdHynFUIMA_sa4s-XsJvnjtgB0" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe>
</div>
<div style="width: 300px; border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none;"></textarea>
<input type="submit" value="Submit"></input>
</div>
</div>
</div>
</noscript>
</form>
</div>
</div>
<div class="cf-column">
<div class="cf-screenshot-container">
<span class="cf-no-screenshot"></span>
</div>
</div>
</div>
<!-- /.columns -->
</div>
</div>
<!-- /.captcha-container -->
<div class="cf-section cf-wrapper">
<div class="cf-columns two">
<div class="cf-column">
<h2 data-translate="why_captcha_headline">Why do I have to complete a CAPTCHA?</h2>
<p data-translate="why_captcha_detail">Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.</p>
</div>
<div class="cf-column">
<h2 data-translate="resolve_captcha_headline">What can I do to prevent this in the future?</h2>
<p data-translate="resolve_captcha_antivirus">If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.</p>
<p data-translate="resolve_captcha_network">If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.</p>
</div>
</div>
</div>
<!-- /.section -->
<div class="cf-error-footer cf-wrapper">
<p>
<span class="cf-footer-item">Cloudflare Ray ID:
<strong>3e6fb7629a536938</strong>
</span>
<span class="cf-footer-separator">•</span>
<span class="cf-footer-item">
<span data-translate="your_ip">Your IP</span>: 46.193.1.145
</span>
<span class="cf-footer-separator">•</span>
<span class="cf-footer-item">
<span data-translate="performance_security_by">Performance & security by</span>
<a data-orig-proto="https" data-orig-ref="www.cloudflare.com/5xx-error-landing?utm_source=error_footer" id="brand_link" target="_blank">Cloudflare</a>
</span>
</p>
</div>
<!-- /.error-footer -->
</div>
<!-- /#cf-error-details -->
</div>
<!-- /#cf-wrapper -->
<script type="text/javascript">
window._cf_translation = {};
</script>
</body>
</html>
I think you can get the info using jQuery ajax call and then send it to your express server and process it
$.ajax({
url: "https://api.coindesk.com/v1/bpi/historical/close.json",
})
.done(function( data ) {
alert(data)
});
});
https://jsfiddle.net/egLqh4ja/

Jquery.find() is not able to access elements

I am trying to access an element in an iframe and .find() is not able to select any element. If I access .contents[0] I do get the entire document but if I try .find( "*" ) or any other selector it returns an empty object. Both html file are in the same folder.
var iframe_all = $('#iframe_vote').contents().find( "*" )
var iframe_document = $('#iframe_vote').contents()[0]
console.log(iframe_all)
console.log(iframe_document)
Result:
Object { length: 0, prevObject: {…} }
HTMLDocument file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html
URL: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
activeElement: <body>
alinkColor: ""
all: HTMLAllCollection { 0: html.no-js, 1: head, 2: meta, … }
anchors: HTMLCollection []
applets: NodeList []
baseURI: "file:///c:/Users/piero/OneDrive/Documents/Visual%20Studio%202017/Projects/marketPredictions/marketPredictions/vote.html"
bgColor: ""
body: <body>
characterSet: "UTF-8"
charset: "UTF-8"
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css\vote.css">
</head>
<body>
<a id = 'btnPlus' href="#plus">
<span class="bg" id="plus"></span>
<span class="symbol"></span>
</a>
<a class="button minus" id = 'btnMinus'href="#minus">
<span class="bg" id="minus"></span>
<span class="symbol"></span>
</a>
<span class="cancel">
Clear
</span>
</body>
</html>
you will need to setup a server environment to work with iframes, file:/// isnt a valid domain and will cause issues with cross domain validation
remember that both pages need to be hosted on the same domain/server
this is a security measure, here is some more information: https://blog.chromium.org/2008/12/security-in-depth-local-web-pages.html

How to display the leaflet popup on the right/left side of mouse pointer?

I want to display the leaflet pop up on the right or left side of the mouse pointer. By default it is displayed on the top of the mouse pointer.
how can I do that?
The demo is available here: http://jsfiddle.net/Wn5Kh
<!DOCTYPE html>
<html>
<head>
<title>CircleMarker tooltip</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css"
/>
<![endif]-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
</body>
</html>
In leaflet.css you can change:
.leaflet-popup {
position: absolute;
text-align: center;
}
Try to play around with the position and you will see that you can change where the popup will be opened.

Jquery hide/show ie8 white space issue

I'm developing a form where some fields hide and show on click. E.g I have an input field called 'Joint Application?' and if 'Yes' is clicked then title, forename, surname etc fields are displayed. If 'No' is clicked then the fields are hidden.
Functionally this all works fine in all browsers, however in IE8 when you click 'NO' the white space remains underneath where the joint applicant fields have been hidden, therefore you have to scroll down the page to find the submit button. In IE7, IE9, Chrome, FF etc the whitespace is removed as expected and the submit button moves back up but IE8 doesn't seem to for some reason.
Below is the html just using the title as an example to keep this short:
<div class="form-row clearfix">
<label for="jointApp"><span class="required">*</span>Joint application</label>
<span class="form-icon"></span>
<div class="form-fields validate-radio">
<span class="radiolabel">Yes<input type="radio" id="jointApp" class="cdq-jointApp-check jointApp" name="jointApp" value="1" ></span>
<span class="radiolabel">No<input type="radio" id="singleApp" class="cdq-jointApp-check jointApp" name="jointApp" value="0" ></span>
</div>
<span class="tooltip_container">
<a href="#" class="tooltip">
<img src="/assets/images/tooltip.jpg" alt="joint application information">
<span>
<img class="callout" src="/assets/images/callout.gif" alt="callout" />
Do you wish to add a second person to your application?
</span>
</a>
</span>
<br /><br />
</div>
<div class="clearfix"></div>
<div id="jointDetails" style="display:none;">
<p class="jointappheader jointDetails" style="display:none">Please enter the joint applicants details below</p>
<div class="jointDetails form-row clearfix" style="display:none">
<label for="joint_title"><span class="required">*</span>Title</label>
<span class="form-icon"></span>
<div class="form-fields joint validate-select">
<select name="joint_title" id="joint_title" class="cdq-joint-title-text validate-select field-select">
<option selected="selected" value="">Please select...</option>
<option value="Mr" >Mr</option>
<option value="Mrs" >Mrs</option>
<option value="Ms" >Ms</option>
<option value="Miss" >Miss</option>
</select>
</div>
</div>
</div>
If it helps my is as follows:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
<!-- CSS concatenated and minified-->
<link rel="stylesheet" href="/assets/css/reset.css">
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="/assets/fancybox/source/jquery.fancybox.css?v=2.1.1" type="text/css" media="screen" />
<!-- end CSS-->
<script src="/assets/js/libs/modernizr-2.0.6.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/assets/fancybox/source/jquery.fancybox.pack.js?v=2.1.1"></script>
<script src="/assets/js/script.js" type="text/javascript"></script>
<script src="/assets/js/slider.js" type="text/javascript"></script>
</head>
Javascript is below
$('#singleApp').click(function(){
$('#jointDetails').hide('slow');
$('.jointDetails').hide('slow');
})
$('#jointApp').click(function(){
$('#jointDetails').show('slow');
$('.jointDetails').show('slow');
})
Let me know if you need any more information.
Thanks
Try the .height() of the element. Try setting height to 0. Try to .remove(). Hopefully this could point you in the right direction; to the actual bug.

Categories