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>
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
I'm using jQuery.mmenu https://mmenu.frebsite.nl. My menu looks like this (Desktop menu):
<nav id="navigation">
<ul class="navigation list-inline d-flex justify-content-center">
<li>
Menu 1
<div class="list-inline d-flex justify-content-center">
<div class="container">
<div class="row">
<div class="col navigation-column pt-1 pb-4">
<h3>Kategoria</h3>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>Menu 2</li>
</ul>
</nav>
How can I get (mobile menu) plugin jQuery.mmenu:
<nav id="navigation">
<ul class="navigation list-inline d-flex justify-content-center">
<li>
Menu 1
<h3>Kategoria</h3>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>Menu 2</li>
</ul>
</nav>
Please help. I've been trying 2 days but I can not improve it.
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>
The jQuery dropdown menu does not pop-up when I click on the link. Here is my code.
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/jquery.dropdown.css" rel="stylesheet" />
<script src="Content/bootstrap-filestyle.min.js"></script>
<script src="Scripts/jquery.dropdown.js"></script>
html:
<span class="fa fa-2x fa-gear"></span>
<div id="ddlDept" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="jq-dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
You need to make use of data-toggle attribute instead of data-dropdown. Also the contents you need to toggle needs to be wrapped inside a div element.
<ul>
<li>
<div class="dropdown">
<span class="fa fa-2x fa-gear"> </span>
<ul class="dropdown-menu" aria-labelledby="ddlDept">
<li>Item 1</li>
<li>Item 3</li>
<li class="dropdown-divider"></li>
<li>Item 4</li>
</ul>
</div>
</li>
</ul>
Working example : http://jsfiddle.net/DinoMyte/5p341amh/263/
From the documentation for jQuery Dropdowns, your container div must have a unique id (check) and the jq-dropdown class "immediately before your closing body tag". For dropdown menus, the div should contain the class jq-dropdown-menu. So it looks like your only issue is prefixing all of the classes with "jq-". That includes dropdown, dropdown-tip, dropdown-divider, and dropdown-menu. http://labs.abeautifulsite.net/jquery-dropdown/
Hi I have a page for which I have four different style sheets like this
<link rel="Stylesheet" href="fancydropdown.css" title="style-1" type="text/css" />
<link rel="Alternate" href="fancydropdown_1.css" title="style-2" type="text/css" />
<link rel="Alternate" href="fancydropdown_2.css" title="style-3" type="text/css" />
<link rel="Alternate" href="fancydropdown_3.css" title="style-4" type="text/css" />
And this is my HTML
<div id="menu">
<ul class="tabs">
<li><h4>In the blog »</h4></li>
<li class="hasmore"><span>Styles</span>
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
</li>
<li class="hasmore"><span>Topics</span>
<ul class="dropdown">
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
<li class="last">Topic 4</li>
</ul>
</li>
<li><h4>Elsewhere »</h4></li>
<li><span>About</span></li>
<li class="hasmore"><span>Networks</span>
<ul class="dropdown">
<li>Twitter</li>
<li>posterous</li>
<li>SpeakerSite</li>
<li>LinkedIn</li>
<li class="last">See more…</li>
</ul>
</li>
<li><span>Bookmarks</span></li>
this my dropdown class
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
when I click on style-1 and so on the style sheets shoud be change .....How can I do this using jquery? Can any one help me?
And please provide me the library's to be used to?
You just change the HREF of your stylesheet.
... HEAD
<link rel="Stylesheet" href="style1.css" >
... BODY
<ul class="dropdown">
<li><a data-stylesheet="style1.css">style 1</a></li>
<li><a data-stylesheet="style2.css">style 2</a></li>
<li><a data-stylesheet="style3.css">style 3</a></li>
</ul>
... SCRIPT
$('.dropdown a').click(function(ev){
ev.preventDefault();
$('link').attr('href',$(this).data('stylesheet'));
});
Please try following which works fine. See demo here http://jsfiddle.net/fLzck/
<ul class="dropdown">
<li>style-1</li>
<li>style-2</li>
<li>style-3</li>
<li>style-4</li>
<li class="last">Menu item 6</li>
</ul>
$(".dropdown a").click(function() {
var thisRel = $(this).attr('rel');
//alert(thisRel);
$("link[rel='stylesheet']").attr('href', thisRel);
})