I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
Related
File DirectoryI'd like to understand why can't VS code follow the absolute path in this script tag. Here is the file directory and the code that I am using. I am using JavaScript's history API in order to create a single page application. Is there a better method than using the history API?
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grand Buffet</title>
<link rel="stylesheet" href="static/css/grandbuffet.css">
</head>
<body>
<header>
<nav>
<img class="grandbuffet" src="static/css/assets/GrandBuffet2.png" alt="GrandBuffet">
<ul class="tabs">
<li class="tab is-active">
<a href="/" data-link>Home</a>
</li>
<li class="tab">
<a href="/aboutus" data-link>About Us</a>
</li>
<li class="tab">
<a href="/menu" data-link>Menu</a>
</li>
<li class="tab">
<a href="/locations" data-link>Locations</a>
</li>
<li class="order-now">
<a href="/ordernow" data-link>Order Now</a>
</li>
</ul>
</nav>
</header>
<div class="main-section">
Hi
</div>
<div id="app"></div>
<footer>
<div class="footer-content">
<p>2022 Grand Buffet All rights reserved</p>
<div class="social-media">
<img src="static/css/assets/insta_blk.png" class="instagram" alt="Instagram">
<img src="static/css/assets/twit_blk.png" class="twitter" alt="Twitter">
<img src="static/css/assets/youtube_blk.png" class="youtube" alt="YouTube">
</div>
</div>
</footer>
<script type="module" src="/static/js/index.js"> </script>
</body>
</html>`
Try removing the first "/", VS code may be trying to find the file starting from the root directory of the project, not from where index.html is located. Or, use "./" (Notice the period at the start, is important) that way your specefying the actual directory where index.html is.
I want to use jquery image annotation plugin with foundation tabs for multiple images. Annotation thing is working fine for the first image, but I can't switch to other tabs. I have jquery no conflict also for addressing the plugin conflict problem but nothing is working. Here is my code
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tabs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="https://annotorious.github.io/latest/annotorious.css" />
<script type="text/javascript" src="https://annotorious.github.io/latest/annotorious.min.js"></script>
</head>
<body>
<h2>Tabs Example</h2>
<ul class="tabs" data-tabs id="tabs_example">
<li class="tabs-title is-active">Player 1</li>
<li class="tabs-title">Player 2</li>
<li class="tabs-title">Player 3</li>
<li class="tabs-title">Player 4</li>
<li class="tabs-title">Player 5</li>
</ul>
<div class="tabs-content" data-tabs-content="tabs_example">
<div class="tabs-panel is-active" id="tab1">
<img id="myImage" class="annotatable" src="pic1.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" /></div>
<div class="tabs-panel" id="tab2">
<img id="myImage1" class="annotatable" src="pic2.jpg" style="border: 30px solid #ccc; padding:20px;" width="30%" height="30%" />
</div>
<div class="tabs-panel" id="tab3">
<p>Third Player</p>
<p>Shane Warne</p>
</div>
<div class="tabs-panel" id="tab4">
<p>Fourth Player</p>
<p>Shaun Pollock</p>
</div>
<div class="tabs-panel" id="tab5">
<p>Five Player</p>
<p>Adam Gilchrist</p>
</div>
</div>
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
<script>
jQuery.noConflict();
jQuery(function() {
jQuery("#tabs-1").tabs({
activate: function(event, ui) {
jQuery('img.annotatable', ui.newPanel).each(function() {
anno.makeAnnotatable(this);
});
}
});
});
</script>
</body>
</html>
Please help me out.
You need to reorganise your scripts - css first then js (for js get jquery first, jquery UI, foundation) - this should work
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
<link type="text/css" rel="stylesheet" href="https://annotorious.github.io/latest/annotorious.css" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
<script type="text/javascript" src="https://annotorious.github.io/latest/annotorious.min.js"></script>
Hi saw that there was another post with the same title "https://stackoverflow.com/questions/27645823/referenceerror-handlebars-is-not-defined" as this but the problem does not look to be the same. I'm trying to build a single page app but I keep getting the "Uncaught ReferenceError: handlebars is not defined" error in the console. The network tab on the console looks to show that the handlebars.min.js is being loaded.
You are invoking handlebars before it is getting loaded. Move your script that compiles handlebars to body like below.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="bower_components/materialize/bin/materialize.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<script type="text/x-handlebars-template" id="main-template">
<h1>Loaded main template</h1>
</script>
<button class="clear-screen">Click Me</button>
<nav>
<div class="nav-wrapper" id="nav-color">
Logo
<i class="mdi-navigation-menu"></i>
<ul class="side-nav" id="mobile-demo">
<li><i class="mdi-action-home left"></i>Home</li>
<li><i class="mdi-content-add left"></i>Add Card</li>
<li><i class="mdi-navigation-close left"></i>Remove Card</li>
<li><i class="mdi-action-stars left"></i>Get Premium</li>
<li><i class="mdi-action-settings left"></i>Settings</li>
</ul>
</div>
</nav>
<ul class="collapsible popout" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="flybuys"><span id="flybuys-text">FlyBuys</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="airpoints"><span id="airpoints-text">Airpoints</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="onecard"><span id="airpoints-text">OneCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="summitclub"><span id="summit-text">Kathmandu Summit Club</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
<li>
<div class="collapsible-header" id="clubcard"><span id="new-world-text">New World ClubCard</span></div>
<div class="collapsible-body"><img id="barcode" src="http://www.barcodes.co.nz/wp-content/uploads/39123439-code39.gif" /></div>
</li>
</ul>
<!-- Modal Trigger -->
<a id="btn-color" class="waves-effect waves-light btn modal-trigger" href="#modal1">Add More</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Get Premium</h4>
<p>To have more than 5 card you need Premium, this gives you the ability to have unlimited card! Get it now for only $1.</p>
</div>
<div class="modal-footer">
Not now
Get Premium
</div>
</div>
<div class="content">
init content
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js">
</script>
<script type="text/javascript" src="bower_components/handlebars/handlebars.min.js"></script>
<script type="text/javascript" src="bower_components/materialize/bin/materialize.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
var template = handlebars.compile( $('#main-template').html() );
$(document).on('click','.clear-screen', function(){
$('.content').html( template() );
});
</script>
</body>
</html>
I have a code where I am including jquery files and bootstrap files in the header.php. I am running into issues where if I include the jquery file before bootstrap.js file, it messes up the other tabs on my webpage and basically even if i click on the other tabs it does not navigate me.
I think there is a conflict between jquery and bootstrap. I am pasting my header.php file below for more reference.
header.php
<?php require_once "essentials.php";
//error_reporting(~0);
//ini_set('display_errors', 1);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="script_dbafactory.js?<?php echo rand(0,511);?>"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="logo" src="./images/source.png">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<div class="dropdown">
<?php include "userlogin.php"; ?>
</div>
</ul>
</div>
</div>
</div>
</div>
</body>
<!--<script type="text/javascript">
//Script to implement tabs
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>-->
<script>
$.noConflict();
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
</script>
Can someone please let me know how do i solve this issue? and how should i load all the js and css files to avoid any issues with the webpage.
Thanks
data-toggle="tab" for bootstrap means there has to have a [tab panel] for it, however, you only use it as nav, and it caused the problem.
Please read: http://getbootstrap.com/javascript/#tabs
Also, use js closure can more easier to avoid js conflict issue:
(function($){
....
})(jQuery);
Please check the code below, you can use WinMerge to compare the code with your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<style>{height:150px; width:1300px;}</style>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="Public">
<title><?php echo $page_title ?></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link href="css/style_header.css" rel="stylesheet">-->
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
</div>
<div class="col-md-8 column dbf">
<h2>
DBA Factory
</h2>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-775712">
<ul class="nav nav-tabs">
<li>
Home
</li>
<li>
Submit a project
</li>
<li>
All Projects
</li>
<li>
Innovative Ideas
</li>
<li>
Matchmaker
</li>
<li>
Meet the Team
</li>
<li class="dropdown">
<a id="userlogin" role="button" data-toggle="dropdown" href="#">rdesai<span class="caret"</span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="userlogin">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(function (){
$('.dropdown-toggle').dropdown();
$('#userlogin').dropdown('toggle');
});
})(jQuery);
</script>
</body>
</html>
Usually when i run into jquery and bootstrap conflicts, i just add this as the first line of my php file:
<script>jQuery.noConflict();</script>
This is to avoid conflicts with other libraries.
You can read more here: https://api.jquery.com/jQuery.noConflict/
Edit:
Or use
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
instead of 1.10.3
Can't seem to get my lightbox to work. Any ideas?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<title>WildFire</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</head>
<body>
<div id="wrapper">
<div id="body">
<img src="images/tempbar.png">
<div id="text">
<img class="logo" src="images/logo.png">
<ul class="info">
<li>Hours: </li>
<p>
<li> Lunch 11am - 3pm </li>
<li> Dinner 5pm - 10pm </li>
<p>
<li>Phone: </li>
<p>
<li>(607) 277-9143</li>
<p>
<li>Address: </li>
<p>
<li> 106 S Cayuga St </li>
<li>Ithaca, NY 14850 </li>
</ul>
<p class="linkouts">
<a rel="lightbox" "href="images/lunch.png">
<img src="images/lunchlink.png">
</a>
<p>
<img src="images/dinnerlink.png">
</div>
</div>
<div id="footer">
For Lounge Events Find Us On
<a href="http://www.facebook.com/pages/Ithaca-NY/WildFire-Lounge/144229581885?ref=ts" target="_blank">
<img class ="fb" src="images/loungefb.png">
</a>
Come Visit
<a href="http://www.madelines-restaurant.com/" target="_blank">
<img class="mad" src="images/madelineslogo.png">
</a>
And Our Friend
<a href="http://www.stateofithaca.com/" target="_blank">
<img class="state" src="images/stlogo.png"
</a>
</div>
</div>
</body>
</html>
Your selector is incorrect, the "#" is no longer used (deprecated, LOL I couldn't think of the word without my morning caffiene). Try this instead:
$(function() {
$('a[rel="lightbox"]').lightBox();
});
Without testing anything else or looking closely at the problem, have you tried removing the incorrectly-placed quote mark from before the href attribute?
<a rel="lightbox" href="images/lunch.png">
<img src="images/lunchlink.png">
</a>