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>
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.
Having some issues with my sliding nav in safari. Basically it just doesn't work. In the inspector panel it is returning the error:
"TypeError: null is not an object (evaluating 'document.getElementById("contracted-menu").style')
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cuttsy+Cuttsy | How we work</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/fonts/fonts.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<script src="js/menu.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
function openNav() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
function openNav() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
</head>
<body>
<!-- ======================
========== MENU ===========
======================= -->
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png" alt="back arrow">
</a>
<a href="index.html">
<img src="images/Cuttsy+Cuttsy_Logo_Square_RGB.png" class="logo" alt="cuttsy and cuttsy logo">
</a>
who we are
<img src="images/Line.png" class="menu-line" alt="line">
how we work
<img src="images/Line.png" class="menu-line" alt="line">
what we do
<img src="images/Line.png" class="menu-line" alt="line">
who we do it for
<img src="images/Line.png" class="menu-line" alt="line">
cuttings
<img src="images/Line.png" class="menu-line" alt="line">
join us
<img src="images/Line.png" class="menu-line" alt="line">
contact
<div class="socialmedia">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" alt="twitter logo">
</a>
</div>
<div class="privacy">
<p>Privacy policy</p>
<p>© Cuttsy+Cuttsy 2018</p>
</div>
</div>
<!-- ======================
======= SMALL MENU ========
======================= -->
<div class="contracted-menu" id="contracted-menu">
<a href="javascript:void(0)" onclick="openNav()">
<img src="images/nav-icons/menu.png" class="burger" alt="open menu">
</a>
<div class="menu-icons">
<a href="who-we-are.html">
<img src="images/nav-icons/Who-we-are.png" alt="who we are">
</a>
<a href="how-we-work.html">
<img src="images/nav-icons/How-we-work.png" alt="how we work">
</a>
<a href="what-we-do.html">
<img src="images/nav-icons/What-we-do.png" alt="what we do">
</a>
<a href="who-we-do-it-for.html">
<img src="images/nav-icons/who-we-do-it-for.png" alt="who we do it for">
</a>
<a href="cuttings.html">
<img src="images/nav-icons/cuttings.png" alt="cuttings">
</a>
<a href="join-us.html">
<img src="images/nav-icons/join.png" alt="join us">
</a>
<a href="contact.html">
<img src="images/nav-icons/contact.png" alt="contact us">
</a>
<div class="socialmedia-sm">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" class="sm-small" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" class="sm-small" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" class="sm-small" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" class="sm-small" alt="twitter logo">
</a>
</div>
</div>
</div>
<!-- ======================
========= CONTENT =========
======================= -->
<div class="webcontent">
<div id="main">
<div>
<div class="row" class="col-sm-12">
<h1>How we work.</h1>
<p class="intro">At Cuttsy and Cuttsy, we never lose sight of what really matters – people. That’s why we pride ourselves on developing close and mutually respectful relationships with our clients. It’s why we constantly keep in mind what the patient or end-user really needs to know. And it’s why we work hard to maintain an award-winning culture of professional development to attract the very best people we can to join our team.</p>
</div>
<div class="secNav">
<ul>
<li class="subButton">Emotional Intelligence</li>
<li class="subButton">Co+Create</li>
<li class="subButton">Health Literacy</li>
</ul>
<ul class="secNav-level2">
<li class="subButton">Compliance</li>
<li class="subButton">CSR</li>
</ul>
</div>
<div class="row">
<hr class="dividingline">
<h2>Emotional Intelligence</h2>
<div class="col-sm-10">
<p id="intro-body">Emotional Intelligence (EI) is the capability of individuals to recognise their own and other people’s emotions and use emotional information to guide thinking and behaviour.</p>
<p class="body-copy">
One of our guiding principles is the power of EI. By guiding our thinking and behaviour, EI helps us to build meaningful and impactful connections in our communications.</p>
<h3>EI guides what we do</h3>
<img src="images/emotional-intelligence.png" class="bodyimg">
<hr class="dividingline">
<img src="images/reason-emotion.png" class="bodyimg">
<p class="body-copy" style="padding-top:30px;">
If you would like to find out more about how we use EI to guide our processes, let’s talk.</p>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="global-footer">
<div class="footer-nav col-sm-10">
<div class="col-sm-3">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Meet the Team</li>
<li>CPD</li>
<li>How we work</li>
<li>Co+Create</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Health Literacy</li>
<li>Compliance</li>
<li>CSR</li>
<li>What we do</li>
<li>Books</li>
<li>Who we do it for</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Cuttings</li>
<li>Join us</li>
<li>Contact</li>
<li>Privacy policy</li>
</ul>
</div>
</div>
</footer>
</html>
Anyone have any ideas? It's the code between the script tags that doesn't want to work.
assign your functions to variables like this:
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
var openNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
var openNav = function() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
I'm stumped. As far as I can see from other posts the following should work to replace the contents of the p tags:
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
but no dice. Also, no indication of an error comes up in the console. Would anyone be kind enough to tell me what I'm doing wrong??
EDIT
Ok here's the whole HTML as rendered by Umbraco:
<!DOCTYPE html>
<html>
<head>
<title>WSHA</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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style.css">
<link rel="stylesheet" type="text/css" href="/css/wsha-style-mobile.css">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans" rel="stylesheet">
</head>
<body>
<nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current">Home
<span id="mainMenuIcon" class="fa fa-bars menuIcon"></span>
</li>
<li class="mainMenuItem">
About us
<span id="1259" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Our People</li>
<li>Who we were and are</li>
<li>Our Houses</li>
<li>Annual Reports</li>
</ul>
</li>
<li class="mainMenuItem">
Being a Tenant
<span id="1293" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Asbestos</li>
<li>Being Safe & Secure</li>
</ul>
</li>
<li class="mainMenuItem">
News
<span id="1305" class="fa fa-caret-down menuIcon subMenuOpener"></span>
<ul>
<li>Community Garden</li>
<li>Football Team</li>
<li>Health Centre</li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
<p id="activateSubMenuIcons">.</p>
<script type="text/javascript">
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
}
</script>
<div id="banner" style="background-image: url('/media/1035/houses-banner.jpg');">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="bannerMobile">
<div id="bannerTitle">
<h1>Whiteinch & Scotstoun Housing Association</h1>
</div>
</div>
<div id="subTitle">
<h4 class="text-centre">A Charity Registered in Scotland No. SC035633.</h4>
<h2 class="text-centre">Aiming for High Quality Homes in a Desirable Environment</h2>
</div>
<div id="homeContent-container">
<div id="homeContent">
<p><p>Welcome to our website. Please let us know if there is any information you would like to see included which we haven't thought of.</p>
<p>The modules are designed to help you navigate the site, and by clicking on the 'keys' on the left hand side of the module home pages, you will, hopefully, find the infomation you need.</p>
<p>You can opt for a text only version (see top of page), and there is the facility to download Adobe Reader is you want to print off any information and don't have this facility already (see below).</p>
<p>Please contact us using the link at the bottom of the page.</p></p>
</div>
</div>
<div id="footerContent">
<div class="footerContentBlock" id="first">
<h4>Quick Links</h4>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/our-people/" target="_blank">
<p>Our People</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/news/" target="_blank">
<p>News</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.banskorental.co.uk/about-us/annual-reports/" target="_blank">
<p>Annual Reports</p>
</a>
</li>
</ul>
<ul>
</ul>
<ul>
</ul>
</div>
<div class="footerContentBlock" id="middle">
<h4>Opening Hours</h4>
<table border="0" height="79" style="width: 272.583px;">
<tbody>
<tr>
<td style="width: 144px;">Monday to Thursday</td>
<td style="width: 108.583px;">9am to 5pm</td>
</tr>
<tr>
<td style="width: 144px;">Friday</td>
<td style="width: 108.583px;">9am to 3pm</td>
</tr>
<tr>
<td style="width: 144px;">Saturday, Sunday</td>
<td style="width: 108.583px;">Closed</td>
</tr>
</tbody>
</table>
</div>
<div class="footerContentBlock" id="last" >
<p style="text-align: right;"><strong>Whiteinch and Scotstoun Housing Association</strong></p>
<p style="text-align: right;">The Whiteinch Centre</p>
<p style="text-align: right;">1 Northinch Court</p>
<p style="text-align: right;">Glasgow</p>
<p style="text-align: right;">G14 0UG</p>
<p style="text-align: right;"> </p>
<p style="text-align: right;">Phone: 0141 959 2552</p>
<p style="text-align: right;">Fax: 0141 950 4432</p>
<p style="text-align: right;">email: wsha_admin#wsha.org.uk</p>
</div>
</div>
<div id="googleTranslateContainer">
<p>Translate this page.</p>
<p id="closeButton" onclick="translateClose()">x</p>
<div id="googleTranslate"></div>
</div>
<script type="text/javascript">
function translateClose() {
document.getElementById("googleTranslateContainer").style.visibility = "hidden";
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'googleTranslate');
}
</script>
<script type="text/javascript" src="/scripts/template2Javascript.js"></script>
</body>
</html>
And the javascript in template2Javascript.js:
document.getElementById("mainMenuIcon").onclick = function () {
var x = document.getElementsByClassName("mainMenuItem");
var numberOfMenuItems = x.length;
for ( i=0 ; i < numberOfMenuItems ; i++ ) {
if (x[i].style.display === "none") {
x[i].style.display = "block";
} else {
x[i].style.display = "none";
}
}
};
if you print something in console you have to write cosole.log() like
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
and also you prevent p tag value than += concat with old value
window.onload = function() {
document.getElementById("activateSubMenuIcons").innerHTML = "hello";
document.getElementById("activateSubMenuIcons1").innerHTML += "hello";
console.log(document.getElementById("activateSubMenuIcons1").innerHTML);
}
<p id="activateSubMenuIcons">.</p>
<p id="activateSubMenuIcons1">.</p>
I apologise for wasting everyone's time. I now realise that I had misunderstood how innerHTML works. I was looking for a change in the source code, not the change in the browser. The reason I didn't spot that it was working was the text was displaying white on white. When I changed the css to make it purple and 200% it showed up and I could see that it does work after all.
I just need to rethink what I'm trying to do - see comment on Bhargav's answer below.
i have jquery mobile list view.
can anybody help me please, to customize this listview.
i want to customize the separator between list, so its will look like this
here is my code
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://demos.jquerymobile.com/1.2.1/js/jquery.mobile-1.2.1.js"></script>
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/css/themes/default/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="http://demos.jquerymobile.com/1.2.1/docs/_assets/css/jqm-docs.css"/>
<div data-role="page" id="mainn">
<div data-role="header" data-tap-toggle="false" data-theme='b'>
</div>
<div data-role="content">
<ul id="promoList" data-role="listview" >
<li>
<img src="airasia.jpg" >
<span class="ui-li-count">test 123</span>
</li>
<li>
<img src="d1380513326.jpg">
<span class="ui-li-count">test 124</span>
</li>
</ul>
</div>
</div>
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>