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>
Related
I'm trying to run npm run build but I encounter this error. I tried to solve it but I'm just beginning my dev journey and was following an old tutoria.how can i go about solving this issue, any solutions will be appreciated.
the error:
error during build:
TypeError: Cannot read properties of undefined (reading 'startOffset')
at overwriteAttrValue (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43339:50)
at Object.transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43575:29)
at async transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:21928:16)
at async ModuleLoader.addModuleSource (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:22153:30)
here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUIDE GPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/a11y-slider#latest/dist/a11y-slider.css" />
<script src="https://unpkg.com/a11y-slider#latest/dist/a11y-slider.js" defer></script>
</head>
<body>
<header class="primary-header">
<div class="container">
<div class="nav-wrapper">
<img src="images/logo.svg" alt="Logo">
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false">
<span class="visually-hidden">Menu</span>
</button>
<nav class="primary-navigation" id="primary-navigation">
<ul aria-label="Primary" role="list" class="nav-list">
<li>Pricing</li>
<li>Services</li>
<li>About Us</li>
<li>Privacy Policy</li>
<!-- <li>Careers</li>
<li>Community</li> -->
</ul>
</nav>
<button class="button | display-sm-none display-md-inline-flex">Get Started</button>
</div>
</div>
</header>
<main>
<section class="hero | text-center-sm-only padding-block-900">
<div class="container">
<div class="even-columns">
<div class="flow">
<h1 class="fs-primary-heading fw-bold">
Vehicle tracking systems can offer companies big benefits.</h1>
<p>Manage makes it simple for software teams to plan day-to-day tasks while keeping the larger team goals in
view.</p>
<button class="button">Get Started</button>
</div>
<div class="hero__image">
<img class="mx-auto" src="images/gps.png" alt="">
</div>
</div>
</div>
</section>
<section class="sales-points | padding-block-900">
<div class="container">
<div class="even-columns">
<div class="sales-points__blog flow text-center-sm-only" style="--flow-spacer: 1.5rem">
<h2 class="fs-secondary-heading fw-bold">What technology we use?</h2>
<p>We use the state of the art tracking hardware,
Teltonika FMB920 is compact and smart tracker with Bluetooth connectivity,
internal High Gain GNSS and GSM antennas and integrated backup battery.
FMB920 is designed for light vehicles tracking in applications like insurance telematics,
rental cars, recovery of stolen cars, public safety services, delivery transport, taxi and much more.
</p>
<div>
<img src="images/tracker1.png" alt="">
</div>
</div>
<div>
<ul class="numbered-items | flow" role="list">
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Accelerometer sensor</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is packed with Accelerometer sensor to detect every possible driving senario,
Green Driving, Over Speeding detection, Jamming detection, GNSS Fuel Counter, DOUT Control Via Call, Excessive Idling detection, Unplug detection, Towing detection, Crash detection, Auto Geofence, Manual Geofence.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Rugged Build</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is designed to withstand harsh environmental condition making it last for years.
Operating temperature (without battery) -40 °C to +85 °C,
Operating humidity 5% to 95% non-condensing,
Ingress Protection Rating IP54,
Battery charge temperature 0 °C to +45 °C, Battery discharge temperature -20 °C to +60 °C.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Mobile App For Live-Tracking</h3>
<p class="numbered-items__body" data-width="wide">
GUIDE GPS provide a mobile application for
tracking your vehicles live within the app,
after the inatallment of the tracking hardware.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="carousel | padding-block-700 text-center">
<h2 class="fs-secondary-heading fw-bold">Mobile App</h2>
<div class="hero__image" >
<img class="mx-auto" width="300" height="430" src="images/app.svg" alt="">
</div>
<ul class="slider">
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<!-- <img src="images/truck.jpg" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Track Your Entire Fleet</h3>
<p data-width="wide">
With our App you will be alble to track
multiple vechiles, with live location updates, time , speed,
fuel conusumbtion, engine igntion, etc...
</p>
</div>
</li>
<li>
<!-- <img src="images/tracker1.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Hardware Monitring</h3>
<p data-width="wide">
The App allows you to monitor your hardware "GPS Device"
status, incase of dissconnection or signal failure.
</p>
</div>
</li>
<li>
</li>
</ul>
<a class="btn btn-google" href="https://play.google.com/store/apps/details?id=com.guidegpsclient.android" title="Google Play">Google Play</a>
</section>
<section class="cta | padding-block-900 bg-accent-400 text-neutral-100">
<div class="container">
<div class="even-columns vertical-align-center">
<div>
<p class="fs-primary-heading fw-bold">Secure Your Vhicles With Us.</p>
</div>
<div class="justify-self-end-md">
<button class="button" data-type="inverted">Call Us</button>
</div>
</div>
</div>
</section>
</main>
<footer class="primary-footer | padding-block-700 bg-neutral-900 text-neutral-100">
<div class="container">
<div class="primary-footer-wrapper">
<div class="primary-footer-logo-social">
<a href="#" aria-label="home">
<svg class="logo" width="146" height="24">
<use xlink:href=""></use>
</svg>
</a>
<ul class="social-list" role="list" aria-label="Social links">
<li><a aria-label="facebook" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-facebook"></use>
</svg></a>
</li>
<li><a aria-label="youtube" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-youtube"></use>
</svg>
</a></li>
<li><a aria-label="twitter" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-twitter"></use>
</svg>
</a></li>
<li><a aria-label="pinterest" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-pinterest"></use>
</svg>
</a></li>
<li><a aria-label="instragram" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-instagram"></use>
</svg>
</a></li>
</ul>
</div>
<div class="primary-footer-nav">
<nav class="footer-nav">
<ul class="flow" style="--flow-spacer: 1em" aria-label="Footer" role="list">
<li>Home</li>
<li>Pricing</li>
<li>Services</li>
<li>About Us</li>
<!-- <li>Careers</li>
<li>Community</li> -->
<li>Privacy Policy</li>
</ul>
</nav>
</div>
<div class="primary-footer-form">
<form action="">
<input type="email">
<button class="button" data-shadow="none">Go</button>
</form>
<p>Copyright 2020. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>
I'm trying to make my button functional on my website but for some reason it isn't working. I have been working on it endlessly and need some outside. If you could help with figuring out what I am doing wrong I would really appreciate it. I am still learning JavaScript and JQuery so all of this is new to me.
HTML Code:
<div id="portfolio">
<div class="container">
<div class="row">
<div class="heading">
<h2>PORTFOLIO</h2>
</div>
<div class="filter">
<ul id="filters">
<li><button class="btn active" data-filter="all">ALL</a></li>
</ul>
</div>
<div class="itemsContainer">
<ul class="items">
<li>
<div class="item" div class="column apps">
<img src="triviastartthumbnail.jpg">
<h4>Movie Trivia App</h4>
<p>This app was created to test users knowledge on how well they know their movies
and actors/actresses</p>
</div>
<ul class="img-list">
<span class="link">
<a href="https://vshorty2003.github.io/movietrivia/"><i class="fa fa-link">
</i></a></span>
<span class="search">
<a href="movietriviaappstart.JPG" figcaption="Movie Trivia App" /><i
class="fa fa-search"></i></a>
</span>
<li class="img-item">
<img class='item-img' src="html5-logo.png" alt="HTML icon" />
</li>
<li class="img-item">
<img class='item-img' src="css-3-logo.png" alt="CSS icon"/>
</li>
<li class="img-item">
<img class='item-img' src="js-icon-26.jpg" alt="JavaScript icon" />
</li>
<li class="img-item">
<img class='item-imgjq' src="jquery-icon-16-revised.png" alt="JQuery icon"/>
</li>
</li>
</ul>
CSS code:
/*for filtered buttons*/
li{
display: inline;
list-style: none;
}
JavaScript code:
$("button").click(function(){
$("button").removeClass("btn active");
$(this).addClass("btn active");
var dataFilter = $(this).data('filter');
if(dataFilter == "all") {
$(".filter ul").show();
}
else
{
$(".filter ul").hide();
$("." + dataFilter).show();
}
});
This code in localhost working correctly.
<html>
<head>
<link rel="stylesheet" href="http://www.ankara.gov.tr/assets/user/asset/css/bootstrap.min.css" type="text/css" media="screen">
<script type="text/javascript" src="http://www.ankara.gov.tr/assets/user/slaythaber/js/slaythaber.js"></script>
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="http://www.ankara.gov.tr/assets/user/slaythaber/css/slaythaber.css">
</head>
<body>
<div id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left: 0px; top: -1140px;">
<ul>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/resimyok.png" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150618-merkez4.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150615-2.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150610-1.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150610-CX8G2822.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150603-1.jpg" alt="">
</li>
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul>
<li class="normal">RAMAZAN BAYRAMI MESAJI
<br>‘Bayramlar, dargınlık ve kırgınlıkların unutulduğu, toplumsal birlikteliğin pekiştiği, saygı ve ...</li>
<li class="normal">VALİ KILIÇLAR, 112 ACİL ÇAĞRI MERKEZİNİ ZİYARET ETTİ
<br>Ankara Valisi Sayın Mehmet Kılıçlar, 17.06. 2015 Çarşamba günü saat 11.00’de Ankara Valiliği 112 Acil ...</li>
<li class="normal">“BİSİKLET DAĞITIMI” PROTOKOLÜ İMZALANDI
<br>15.06.2015 Pazartesi günü saat 11.00’de Valilik Makamında, Ankara Halk Sağlığı Müdürlüğü tarafından ...</li>
<li class="current">TÜRKİYE TAEKWONDO FEDERASYONU BAŞKANI ŞAHİN’DEN VALİ KILIÇLAR’A ZİYARET
<br>Türkiye Taekwondo Federasyonu Başkanı Doç. Dr. Metin Şahin, Federasyon Disiplin Kurulu Üyesi Adnan Kurban ...</li>
<li class="normal">ANKARA BÜYÜKŞEHİR BELEDİYESİ ÇOCUK MECLİSİNDEN VALİ KILIÇLAR’A ZİYARET
<br>Ankara Büyükşehir Belediyesi Çocuk Meclisinden Meclis Başkanı ve Komisyon Başkanları çocuklar, 10.06.2015 ...</li>
<li class="normal">ANKARA’YA SAĞLIK TURİZMİ YATIRIMI
<br>Çin Halk Cumhuriyeti Sincan Uygur Özerk Bölgesi’nden bir yatırım grubunun Ankara’da gerçekleştireceği ...</li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/resimyok.png" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150618-merkez4.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150615-2.jpg" alt="">
</li>
<li class="current">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150610-1.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150610-CX8G2822.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150603-1.jpg" alt="">
</li>
</ul>
</div>
Tümü
</div>
</body>
</html>
It gives an error when I want to add my site
<script>
function func1() { var head = document.getElementsByTagName('head')[0]; var script1 = document.createElement('script'); script1.type = 'text/javascript'; script1.src = 'http://www.ankara.gov.tr/assets/user/slaythaber/js/slaythaber.js'; head.appendChild(script1); } window.onload = func1;
< /script>
< link rel="stylesheet" href="http://www.ankara.gov.tr/assets/user/asset/css/bootstrap.min.css" type="text/css" media="screen" />
<!--[if IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif] -->
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif] -->
< link rel="stylesheet" type="text/css" media="all" href="http://www.ankara.gov.tr/assets/user/slaythaber/css/slaythaber.css" />
< script type="text/javascript" src="http://www.ankara.gov.tr/assets/user/slaythaber/js/slaythaber.js">
< /script>
< script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js">
< /script>
< script>
$(document).ready(function() { jQuery('.mansetcontainer table').html(''); $('
<div id="ifocus" style="width: 643px;height: 395px;">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left: 0px; top: -380px;">
<ul>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/resimyok.png" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150618-merkez4.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150615-2.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150610-1.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150610-CX8G2822.jpg" alt="">
</li>
<li>
<img src="http://www.ankara.gov.tr/assets/upload/haber/20150603-1.jpg" alt="">
</li>
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul>
<li class="normal">RAMAZAN BAYRAMI MESAJI
<br>‘Bayramlar, dargınlık ve kırgınlıkların unutulduğu, toplumsal birlikteliğin pekiştiği, saygı ve ...</li>
<li class="current">VALİ KILIÇLAR, 112 ACİL ÇAĞRI MERKEZİNİ ZİYARET ETTİ
<br>Ankara Valisi Sayın Mehmet Kılıçlar, 17.06. 2015 Çarşamba günü saat 11.00’de Ankara Valiliği 112 Acil ... </li>
<li class="normal">“BİSİKLET DAĞITIMI” PROTOKOLÜ İMZALANDI
<br>15.06.2015 Pazartesi günü saat 11.00’de Valilik Makamında, Ankara Halk Sağlığı Müdürlüğü tarafından ...</li>
<li class="normal">TÜRKİYE TAEKWONDO FEDERASYONU BAŞKANI ŞAHİN’DEN VALİ KILIÇLAR’A ZİYARET
<br>Türkiye Taekwondo Federasyonu Başkanı Doç. Dr. Metin Şahin, Federasyon Disiplin Kurulu Üyesi Adnan Kurban ...</li>
<li class="normal">ANKARA BÜYÜKŞEHİR BELEDİYESİ ÇOCUK MECLİSİNDEN VALİ KILIÇLAR’A ZİYARET
<br>Ankara Büyükşehir Belediyesi Çocuk Meclisinden Meclis Başkanı ve Komisyon Başkanları çocuklar, 10.06.2015 ...</li>
<li class="normal">ANKARA’YA SAĞLIK TURİZMİ YATIRIMI
<br>Çin Halk Cumhuriyeti Sincan Uygur Özerk Bölgesi’nden bir yatırım grubunun Ankara’da gerçekleştireceği ...</li>
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/resimyok.png" alt="">
</li>
<li class="current">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150618-merkez4.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150615-2.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150610-1.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150610-CX8G2822.jpg" alt="">
</li>
<li class="normal">
<img src="http://www.ankara.gov.tr/assets/upload/haber/thumb/20150603-1.jpg" alt="">
</li>
</ul>
</div>Tümü </div>').appendTo('.mansetcontainer '); });
< /script>
Error is:
Uncaught TypeError: $(...).getElementsByTagName is not a function
iFocusChange # slaythaber.js:72 window.onload# slaythaber.js:9
getElementsByTagName() is a native DOM function on the document and other DOM element objects, not a jQuery function.
For instance, document.getElementsByTagName("p") works, or $(document)[0].getElementsByTagName("p"), but it's not a function of a jQuery object directly ... you have to access the underlying native DOM elements the jQuery query object is wrapping before you can call getElementsByTagName() and other native DOM query functions. What you really want to use for the native jQuery object is something like either the children() or find() methods, both of which can take selector strings.
Ok so I'm learning lightbox for the first time. I'm trying to use it with this bootstrap template I downloaded which made it easy to put in the images and customize the navbar. Right now when I click the image, it brings me to a page with JUST the image. No pop up. Right now I'm focusing on just gallery1.jpg if you look at the HTML. Am I missing something? Hope this isn't confusing, thanks.
I am trying to use fancyBox for the lightbox add on.
Do I have the javascript location typed up incorrectly? http://i.imgur.com/pCgZkKA.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>4 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/4-col-portfolio.css" rel="stylesheet">
<!-- lightbox stuff -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color:#F60;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs- example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../startbootstrap4/index.html"><img src="logonav.png"</a></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Gallery
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a class="fancybox" rel="group" href="images/gallery1.jpg" data-lightbox="fancybox" data- title="untitled"><img src="images/gallery1.jpg"></a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery2.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery10.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery4.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery5.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery3.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery9.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery8.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery7.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery6.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery11.jpg" alt="">
</a>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="images/gallery12.jpg" alt="">
</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
»
</li>
</ul>
</div>
</div>
<hr>
<footer>
<div class="row">
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You are loading jQuery twice:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
and at the end
<script src="js/jquery.js"></script>
remove the second one.
Hi i am new for jquery mobile . I need to add snap.js to my app in order to archive slide menu function.Afer googling i decide to use snap.js. https://github.com/jakiestfu/Snap.js/
Please see my code below
page1.html
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' data-prefetch="true" href="page2.html">Sign in</a>
page2.html
<body>
<div data-role="page" data-title="Panel fixed positioning" id="landingPage" class="snap-content" >
<div data-role="header" data-position="fixed">
<div id="branding">Smart Realtor</div>
Menu
Logout
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth">
<!-- coverstory -->
<div class="coverstory">
<img src="images/cover_story_img.jpg" alt="" class="scale-with-grid"/>
<div class="textbox">
<h1>Cover Story</h1>
<p>Latest pre-launch properties & new launch properties for sale in Kuala Lumpur & Selangor, Malaysia. Our site shows you new property launches for investment .....</p>
</div>
</div><!-- /coverstory -->
<div class="clear"></div>
<!-- main button -->
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-calendar ui-nodisc-icon" id="calendarBtn" ><br>Appointment<br><br>
</a>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-file-text-o ui-nodisc-icon" id="co-brokingBtn"><br>Co-broking<br>
Agreement</a>
</div>
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="advertise_group.html" rel="external" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-top ui-icon-comment ui-nodisc-icon" id="pagroupBtn" ><br>Property Advertisement<br>(Group)</a>
</div>
<div class="ui-block-b">
<br>Property Advertisement<br>(Agent)
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-title="fixed positioning" >
<div data-role="navbar" data-iconpos="top">
<ul>
<li>More Menu</li>
</ul>
</div>
</div>
</div>
<div id="menu" class="panel_bg snap-drawers">
<div class="snap-drawer snap-drawer-left">
<a href="profile.html"><div class="profile_wrapper">
<img src="images/profile_pic.jpg">
<h2>John Smith</h2>
<p>GCS Property Agent</p>
<p class="smalltxt">View Profiles</p>
</div> </a>
<div class="clear"></div>
<ul class="side_navi">
<li class="list-divider" >DISCOVER MORE</li>
<li><img src="css/png/bookmark.png" alt="" class="ui-li-icon ui-alt-icon"/>News & Noteworthy</li>
<li><img src="css/png/book.png" alt="" class="ui-li-icon ui-alt-icon"/>Customer Contact Lisiting</li>
<li><img src="css/png/laptop.png" alt="" class="ui-li-icon ui-alt-icon"/>Team Leader Monitoring</li>
<li><img src="css/png/home.png" alt="" class="ui-li-icon ui-alt-icon"/>Property Listing</li>
<li><img src="css/png/user.png" alt="" class="ui-li-icon ui-alt-icon"/>Tenant Listing</li>
<li><img src="css/png/calendar.png" alt="" class="ui-li-icon ui-alt-icon"/>Appointment Management</li>
<li><img src="css/png/usd.png" alt="" class="ui-li-icon ui-alt-icon"/>Home Loan Calculator</li>
<li class="list-divider" >Miscellaneous </li>
<li><img src="css/png/gears.png" alt="" class="ui-li-icon ui-alt-icon"/>Setting</li>
<li><img src="css/png/envelope.png" alt="" class="ui-li-icon ui-alt-icon"/>Feed Back</li>
</ul>
</div><!-- /panel -->
</div>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('landingPage'),
disable: 'right'
});
</script>
</body>
Everything if working fine if i change the hyperlink to use rel="external"
<a class="ui-btn ui-corner-all ui-shadow" id='lnkSignIn' rel="external" href="page2.html">Sign in</a>
Any solution if i want to use data-perfetch="true" inside my hperlink?