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');
});
Related
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
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.
I have this bootstrap template: http://wrapbootstrap.com/preview/WB0412697
I have stripped out my header section in the index.html and placed it into it's own file named header.html.
I have tried using the techniques JQuery techniques located on these stack overflow pages and have no been able to get the page to render the header.html within the index.html:
- Make header and footer files to be included in multiple html pages, Common Header / Footer with static HTML and Include another HTML file in a HTML file
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="wrapper">
<!--=== Header ===-->
<!--=== End Header ===-->
In between header and end header I have tried:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
along with the other examples within the aforementioned links as well as. I have also tried:
<!--#include virtual="insertthisfile.html" -->
which would have been really nice if it worked, as it seems very simple and
<?php include("filename.html"); ?>
but after changing the .html files to .php, my browsers only render plain text.
Any suggestions? What am I doing wrong?
you can make a php file like this. I expect you want the <head> staying the same as well
<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
then you can choose between different main content files depending on the $_GET using a if statement
<?php
$header = file_get_contents('header.html');
if($_GET['page'] == 'home'){
$main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
$main = file_get_contents('contact.html');
}
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
First step : create div for footer and header
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<script type="text/javascript">
$(function () {
$.get("header.html", function (respons) {
var header1 = respons;
$("body").append(header1);
});
});
</script>
</head>
<body>
</body>
</html>
Use simply PHP code:
<?php
// Include file with header
include("./include/header.php");
// This bit always includs to the "center" Call page file via URL
if (isset($_GET['page'])){
$file=$_GET['page'];
$file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
if(file_exists($file2)){
if(substr_count($file,"../")>0){
echo "Warning!";
}elseif($file=="index" or $file=="/index"){
echo "Warning!";
}else{
include $file2;
}
}else{
include "./include/404.php";
}
}else{
include "uvod.php";
}
// Include file with footer
include("./include/footer.php");
?>
I have an index page for a website where I have a lot of images in a masonry gallery. Right now its loading a bit slow and I am trying to use lazyload and unveil. Originally, I tried lazyload, but I need to maintain a width proportion so I opted instead for unveil.js
However, after trying to implement unveil, I find my images do not load at all. Here is a sample of my markup:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css"></style>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Peter Lum Fluid.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<script src="Snap.svg-0.1.0/dist/snap.svg-min.js"></script>
</style>
<script> window.jQuery || document.write('<script src-"jquery-1.9.1.min.js"><\/script>') </script>
<title>Peter Lum</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="jquery.unveil.js" type="text/javascript"> </script>
<script>
$(document).ready(function() {
$("img").unveil();
});
$(function(){
$("img").unveil();
});
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
</script>
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1"><!--Use Insert Panel for additional Fluid Grid Layout Div tags. Note: All Layout Div tags must be inserted directly inside the "gridContainer" div tag. Nested Layout Div tags are not currently supported.-->
<header>
<a class="logo" href="mailto:hello#peterlum.co"></a>
<h1> Peter Lum </h1>
<hr>
<ul class=" navigation scaling">
<li class="scaling"><img class="invert" src="images/about.png"></li>
<li class="scaling"><img class="invert" src="images/work.png"></li>
<li class="scaling"><img class="invert" src="images/contact.png"></li>
<li class="scaling"><img class="invert" src="images/blog.png"></li>
<li class="scaling"><a data-pin-do="buttonFollow" href="http://www.pinterest.com/peterlunglum/pins/"><img class="invert" src="images/pinterest nav.png"></a></li>
</ul>
<hr>
</header>
</div>
<div id="LayoutDiv2" class="container">
<div class="box">
<div class="article">
<img alt="Atelier" class= "thumbnail img lazy" src="images/blank.png" data-src="images/Atelier-2.png"><h4>A Shop of Work</h4>
<p> <a class="" href="#">Read more »</a></p>
</div>
</div>
</div>
<!-- /container -->
<div id="backtotop"></div>
<div class="footer">
`enter code here` <p> Work of Peter Lum. Thanks for visiting. Website designed myself using Masonry. ©2014.</p>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#backtotop').fadeIn();
} else {
$('#backtotop').fadeOut();
}
});
$('#backtotop').click(function() {
$('body,html').animate({scrollTop:0},900);
});
});
</script>
<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>
<script src="base.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-1.4.3.min.js"></script>
</body>
</html>
I included just one image div so far. Can anybody tell me why it doesn't load my images in layoutdiv2? The documentation of unveil says that the usage of unveil has syntax like this:
<img src="bg.png" data-src="img1.jpg"/>
Do I have to follow that exact syntax for it to work? Moreover, is that simply the problem or is something else wrong?
First on your css you have to write
img {
opacity: 0;
transition: opacity .3s ease-in;
}
then you can run plugin
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js"></script>
But because this plugin is jQuery dependencies, you can change this.style.opacity = 1; with $(this).css( { 'opacity': 1} );
Now on your <img> tag, you can use custom attribute like data-src="img2.jpg" data-src-retina="img2-retina.jpg"
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.