I'm trying to change the class of a <span> tag depending on whether aria-expanded is true or false but it seems to return "undefined" instead so it's not working.
This is my javascript:
$(function () {
if ($('#tester').attr('aria-expanded') === 'true') {
$("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
}
});
And my html looks like this (using bootstrap):
<div class="col-sm-6">
<a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false">
<h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3>
</a>
<div class="collapse" id="collapsible">
<div class="card card-block">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
</div>
You can change it to click function, you can use selector you want instead of h3. Hope it helps:
$(function () {
$("h3").click(function () {
$("#testerTwo").toggleClass("glyphicon-eye-close glyphicon-eye-open");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="col-sm-6">
<a id="tester" data-toggle="collapse" href="#collapsible" aria-expanded="false">
<h3><span class="glyphicon glyphicon-star"></span> Extra <span id="testerTwo" class="glyphicon glyphicon-eye-close"></span></h3>
</a>
<div class="collapse" id="collapsible">
<div class="card card-block">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
</div>
Related
I have a website where I installed SlickNav. I have it calling properly, and the linking works properly, however it doesn't seem to want to initialize in the site itself. I'm calling it via the following:
<link rel="stylesheet" href="/wp-content/themes/mta360/dist/styles/slicknav.css" />
<script src="/wp-content/themes/mta360/dist/scripts/slicknav.js"></script>
The menu code is as follows:
<header>
<!-- Header Start -->
<div class="header-area">
<div class="main-header ">
<div class="header-top top-bg d-none d-lg-block">
<div class="container">
<div class="col-xl-12">
<div class="row d-flex justify-content-between align-items-center">
<div class="header-info-left">
<ul>
<li>1234567890</li>
<li>mta360seo#gmail.com</li>
</ul>
</div>
<div class="header-info-right">
<ul>
<li>Mon - Fri: 9:00 - 5:00</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="header-bottom header-sticky">
<div class="container">
<div class="row align-items-center">
<!-- Logo -->
<div class="col-xl-2 col-lg-1 col-md-1">
<div class="logo">
<img src="/logo.png" alt="">
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8">
<!-- Main-menu -->
<div class="main-menu f-right d-none d-lg-block">
<nav>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Heating</li>
<li>Cooling</li>
<li>Press
<ul class="submenu">
<li>Blog</li>
<li>Releases</li>
</ul>
</li>
<li>Company
<ul class="submenu">
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-3">
<!-- Header-btn -->
<div class="header-btn d-none d-lg-block">
Quote
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
Is there something I'm missing? It works for my local testing, but when I compile and try to use it on the actual site, it just doesn't want to initialize at all. Is there something I'm missing?
It's a wordpress site using Sage 9, in case that helps with the diagnosis.
You have to initialize it using Javascript code.
The 2 first libraries you are calling are the CSS slicknav library and the JS slicknav library. You also need to load jQuery for slicknav to work.
So add this to your code at the beginning:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
$(document).ready(function(){
$('#menu').slicknav({
// Label for menu button.
// Use an empty string for no label.
'label' : 'MENU',
// If true, the mobile menu is a copy of the original.
'duplicate': true,
// The duration of the sliding animation.
'duration': true,
// other parameters see here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html //
});
});
also you need to specify an ID "menu" to the <ul> element like this:
<ul id="menu">
<li>...</li>
</ul>
Finally, make sure your HTML markup follows the specified structure for slick nav which is:
<ul id="menu">
<li>Home
<ul>
<li>Blog</li>
<li>Plugins
<ul>
<li>Latest</li>
<li>Most Popular</li>
<li>Recommended</li>
</ul>
</li>
<li>Publishing</li>
</ul>
</li>
<li>Top <a href="#">Menu 2</a></li>
<li>Top Menu 3</li>
<li>Top Menu 4
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</li>
</ul>
more here: https://www.jqueryscript.net/menu/Creating-A-Responsive-Mobile-Navigation-Menu-with-slicknav-jQuery-Plugin.html
when I click on link in mobile it is not working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
I have a few drop down menus on my pages navbar using bootstrap elements along with my customized javascript. I have made it conditional to only run if the screen width size is greater than 480 (the xs size for bootstrap). Problem is that the script runs when the screen width is at 480, below 480, and of course 480. IN other words my conditional statement surrounding the script running the dropdown on hover script is being ignored by the browser for some reason. MY GOAL is to make it so the hover effect only takes place as long as the navbar is not collapsed.
Javascript
if ( $(window).width() > 480) {
$('ul.nav li.dropdown').hover(function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
"use strict";
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
}
HTML
<!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">
<title>Made with Love and Sarcasm</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--Custom theme-->
<link href="css/styles.css" rel="stylesheet">
<link href="css/theme.min.css" rel="stylesheet">
<link href="css/sticky-footer.css" rel="stylesheet">
<script src="https://use.typekit.net/mxj2kia.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="index.html" class="navbar-brand title">
<h1 class="sr-only">Made With Love and Sarcasm</h1>
<img src="img/ggc_logo_larger.png" alt="logo" class="pushup img-responsive img-rounded"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<form class="form-inline inline" action="">
<!--Make sure to program a search feature here-->
<div class="input-group navbar-btn">
<input type="text" class="form-control" placeholder="Search For" aria-describedby="Placeholder">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" id="search-button"> <span class="glyphicon glyphicon-search"></span> </button>
</span> </div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="title dropdown">Admire<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li><span class="glyphicon glyphicon-scissors"> Outfits</span></li>
<li><span class="glyphicon glyphicon-cutlery"> Foods</span></li>
<li><span class="glyphicon glyphicon-sunglasses"> Props</span></li>
<li><span class="glyphicon glyphicon-star"> Misc</span></li>
</ul>
</li>
<li class="title dropdown">Explore<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="title dropdown">Create<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="admire menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
</div>
<!--/collapse-->
</div>
<!--/container-->
</div>
<!--/navbar-->
<div class="jumbotron placeholder">
<div class="container">
<h1>Place to Put Amazing Photos</h1>
</div>
<!--replace with image-->
</div>
<div class="container">
<div class="row visible-lg visible-md visible-sm">
<div class="col-md-3 visible-md visible-lg"> Incredible Outfits </div>
<div class="col-md-3 visible-md visible-lg"> Wonderful Cooking </div>
<div class="col-md-3 visible-md visible-lg"> Outstanding Props </div>
<div class="col-md-3 visible-md visible-lg"> Amazing Creations </div>
<div class="col-sm-3 visible-sm"> Incredible Outfits </div>
<div class="col-sm-3 visible-sm"> Wonderful Cooking </div>
<div class="col-sm-3 visible-sm"> Outstanding Props </div>
<div class="col-sm-3 visible-sm"> Amazing Creations </div>
</div>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-scissors"> Outfits</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-cutlery"> Cooking</span> </div>
</div>
<br>
<div class="row visible-xs">
<div class="col-xs-6"><span class="glyphicon glyphicon-sunglasses"> Props</span> </div>
<div class="col-xs-6"><span class="glyphicon glyphicon-star"></span> Creations </div>
</div>
</div>
<div class="footer">
<div class="container">
<p>© 2017 Made With Love and Sarcasm</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/function.js" type="text/javascript"></script>
</body>
</html>
Customized CSS
#charset "utf-8";
/* CSS Document */
h1, h2, h3, h4, h5, h6, h7 {
font-family: vatican;
}
.title {
font-family: vatican;
}
.pushup {
margin-top: -8px;
}
.placeholder {
height: 500px;
}
div.jumbontron h1 {
color: black;
}
.inline {
display: inline-block;
}
I was using the wrong size. The size should be 767.
I am messing around trying to make a custom bootstrap 3 website however I'm currently stuck up on this dropdown menu. I have tried everything from using the web CDN instead of my local files, copying other peoples dropdown code and nothing seems to want to work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- MDP top banner image -->
<div class="top-banner">
<img class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>
<!-- top bar nav -->
<nav class="navbar navbar-inverse navbar-maintop">
<div class="container-fluid align-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-tab">HOME</li>
<li class="nav-tab">ABOUT US</li>
<li class="dropdown nav-tab">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<!--<li class="nav-tab">SUSPENSION & LIFT COMPONENTS
</li> -->
<li class="nav-tab">PAGE 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
</body>
</html>
My destination.html.twig file:
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Destination Page</title>
<link href="{{ asset('bundles/hearwegohearwego/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('bundles/hearwegohearwego/css/destination.css') }}" rel="stylesheet" type="text/css">
<script src="{{ asset('bundles/hearwegohearwego/js/jquery-2.1.4.min.js') }}"></script>
<script src="{{ asset('bundles/hearwegohearwego/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('bundles/hearwegohearwego/js/destination.js') }}"></script>
</head>
<body>
<div id="toppage">
<img src="{{ asset('bundles/hearwegohearwego/images/banner.png') }}" style="width:100%">
</div>
<div class="container">
<div class="row">
<div id="area" class="col-md-3">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/1.png') }}" id="area1">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/2.png') }}" id="area2">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/3.png') }}" id="area3">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/4.png') }}" id="area4">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/5.png') }}" id="area5">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/6.png') }}" id="area6">
<img src="{{ asset('bundles/hearwegohearwego/images/destination/7.png') }}" id="area7">
</div>
<div id="city" class="col-md-3">
<nav id="place1" hidden>
<ul>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</nav>
<nav id="place2" hidden>
<ul>
<li>Item 21</li>
<li>Item 22</li>
</ul>
</nav>
<nav id="place3" hidden>
<ul>
<li>Item 31</li>
<li>Item 32</li>
</ul>
</nav>
<nav id="place4" hidden>
<ul>
<li>Item 41</li>
<li>Item 42</li>
</ul>
</nav>
<nav id="place5" hidden>
<ul>
<li>Item 51</li>
<li>Item 52</li>
</ul>
</nav>
<nav id="place6" hidden>
<ul>
<li>Item 61</li>
<li>Item 62</li>
</ul>
</nav>
<nav id="place7" hidden>
<ul>
<li>Item 71</li>
<li>Item 72</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
And my destination.js file:
$(function()
{
$("#area img").click(function()
{
var theid=$(this).attr('id');
var sub=theid.substr(4,1);
$("nav").each(function()
{
var num=$(this).attr('id').substr(5,1);
if (sub!=num)
$(this).hide();
});
$("#city #place"+sub).toggle();
});
});
Currently, each time an image is clicked, a respective unordered list is toggled while all others are hidden. Now, I want to use popover instead of toggle. What should I do? In w3schools only shows how to use if content is string. I want to use content of list items
You can use the boostrap popover like
$(function() {
$("#area img").popover({
html: true,
trigger: 'hover',
content: function() {
return $('#' + this.id.replace('area', 'place')).removeAttr('hidden');
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div id="toppage">
<img src="//placehold.it/32X32"/>
</div>
<div class="container">
<div class="row">
<div id="area" class="col-md-3">
<img src="//placehold.it/32X32&text=1" id="area1"/>
<img src="//placehold.it/32X32&text=2" id="area2"/>
<img src="//placehold.it/32X32&text=3" id="area3"/>
<img src="//placehold.it/32X32&text=4" id="area4"/>
<img src="//placehold.it/32X32&text=5" id="area5"/>
<img src="//placehold.it/32X32&text=6" id="area6"/>
<img src="//placehold.it/32X32&text=7" id="area7"/>
</div>
<div id="city" class="col-md-3">
<nav id="place1" hidden>
<ul>
<li>Item 11</li>
<li>Item 12</li>
</ul>
</nav>
<nav id="place2" hidden>
<ul>
<li>Item 21</li>
<li>Item 22</li>
</ul>
</nav>
<nav id="place3" hidden>
<ul>
<li>Item 31</li>
<li>Item 32</li>
</ul>
</nav>
<nav id="place4" hidden>
<ul>
<li>Item 41</li>
<li>Item 42</li>
</ul>
</nav>
<nav id="place5" hidden>
<ul>
<li>Item 51</li>
<li>Item 52</li>
</ul>
</nav>
<nav id="place6" hidden>
<ul>
<li>Item 61</li>
<li>Item 62</li>
</ul>
</nav>
<nav id="place7" hidden>
<ul>
<li>Item 71</li>
<li>Item 72</li>
</ul>
</nav>
</div>
</div>
</div>