I am trying to get this carousel working using jQuery strict mode, when clicking on the prev and next button nothing is responding and weird part is there is no errors in the console. Am i missing something from the code.
html:
<!doctype html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Micah FED Conclusive Exercise</title>
<link rel="stylesheet" type="text/css" href="inc/css/reset.css" />
<link rel="stylesheet" type="text/css" href="inc/css/base.css" />
<script src="inc/js/vendor/jquery.min.js"></script>
<script src="inc/js/base.js"></script>
</head>
<body>
<header>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<h2 class="logo">LOGO</h2>
</header>
<div class="page-content">
<section class="main-carousel">
<div class="carousel-next">></div>
<div class="carousel-prev"><</div>
<div class="carousel-cells">
<article>
<div class="slide-text">
<h1>Slide One</h1>
<p>A slide about sliding slides.</p>
</div>
</article>
<article>
<div class="slide-text">
<h1>Slide Two</h1>
<p>A slide-sliding slider sliding slides.</p>
</div>
</article>
<article>
<div class="slide-text">
<h1>Slide Three</h1>
<p>A slide-sliding slider sliding slides.</p>
</div>
</article>
</div>
</section>
<section class="column-content">
<h1>Three Columns</h1>
<div class="three-columns">
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
<aside class="list-block">
<h3>List Heading</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</aside>
</div>
</section>
</div>
</body>
Here is the jQuery bit instead i have to do this using strict mode. Which i find difficult
jQuery:
(function() {
var Carousel = {
props:{
current_slide:1,
total_slides:3
},
init:function(){
Carousel.next();
Carousel.previous();
},
bindEvents:function(){
$(".carousel-next").on("click",function(){
alert('next');
Carousel.next();
});
$(".carousel-prev").on("click",function(){
Carousel.previous();
});
},
next:function(){
this.props.current_slide += 1;
},
previous:function(){
this.props.current_slide -= 1;
},
update:function(){
}
}
$(function(){
Carousel.init();
})
})(window);
Related
This is my code:
$(document).ready(function () {
$('<button class="btn more">View More</button>')
.appendTo(".listing-item-container")
.click(function() {
$(this).closest(".listing-item-container").removeClass("collapsed");
});
$('<button class="btn less">View Less</button>')
.appendTo(".listing-item-container")
.click(function() {
$(this).closest(".listing-item-container").addClass("collapsed");
});
});
.listing-item-container.collapsed > :nth-of-type(n+3) {
display:none;
}
.listing-item-container > .more {
display:none;
}
.listing-item-container > .less {
display:block;
}
.listing-item-container.collapsed > .more {
display:block;
}
.listing-item-container.collapsed > .less {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing-item-container collapsed">
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div><div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<!-- 100 more listing-item divs present here -->
</div>
In above code when I click view more, it will display all remaining 'listing item' div and when I click view less, all divs are collapsed and display only 2 divs.
My expected output is, when I click view more it should only display next 2 'listing item' div and view more button. Again If I click view more, it should display next 2 'listing item' div and view more button. This should continue for all 100 more 'listing item' div. In the end it should display view less button. When I click view less button, each time it should collapse last 2 'listing item' div.
How can I modify my code to get the expected output?
The key here is in the use of jquery slice() (same as javascript slice() but on a jquery collection).
var howManyItemsToShow = 2;
$(".listing-item").hide().slice(howManyItemsToShow).show();
this will hide all the items, then show the first 2. The UI update will be combined into a single action. If you add animation (.slideDown / .fadeIn) then this will need to be different.
You then add your "pagesize" (2 in the example) each time you click; and update.
Add a check for start/end and utilising the css trick to show/hide the more/less buttons gives you:
var lines = 2;
var pagesize = 2;
// assuming they don't change, load them up-front for small efficiency gain (and DRY)
var items = $(".listing-item-container .listing-item");
$(document).ready(function() {
$('<button class="btn more">View More</button>')
.appendTo(".listing-item-container")
.click(function() {
lines += pagesize;
items
.show()
.slice(lines).hide();
if (lines >= items.length)
$(this).closest(".listing-item-container").removeClass("collapsed");
});
$('<button class="btn less">View Less</button>')
.appendTo(".listing-item-container")
.click(function() {
// same for "less" but -= and different check
// this can of course be combined with the "more" button (DRY)
// shown separately for clarity
lines -= pagesize;
items.show();
items.slice(lines).hide();
if (lines <= pagesize)
$(this).closest(".listing-item-container").addClass("collapsed");
});
});
.listing-item-container.collapsed> :nth-of-type(n+3) {
display: none;
}
.listing-item-container>.more {
display: none;
}
.listing-item-container>.less {
display: block;
}
.listing-item-container.collapsed>.more {
display: block;
}
.listing-item-container.collapsed>.less {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listing-item-container collapsed">
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul class="no-list-style">
<li>list content</li>
<li>list content</li>
<li>list content</li>
<li>list content</li>
</ul>
</div>
<!-- 100 more listing-item divs present here -->
</div>
I will do that this way...
((parentRef='.listing-item-container', ItemsRef='.listing-item', startView=2, addView=2 )=>
{
const
listItems = document.querySelectorAll(ItemsRef)
, btMoreLess = document.querySelector(parentRef).appendChild( document.createElement('button'))
;
btMoreLess.className = 'showMore'
var listItemsViewCount = startView -addView;
btMoreLess.onclick =_=>
{
listItemsViewCount += btMoreLess.classList.contains('Less') ? -addView : +addView
listItems.forEach( (item,i)=> item.classList.toggle('noDisplay',i>=listItemsViewCount) )
if (listItemsViewCount >= listItems.length) btMoreLess.classList.add('Less')
else if (listItemsViewCount === startView) btMoreLess.classList.remove('Less')
}
btMoreLess.click() // init
}
)() // IIFE ending
.noDisplay{ display:none; }
button.showMore:before { content : 'View More'; }
button.showMore.Less:before { content : 'View Less'; }
.listing-item-container { counter-reset: itemCounter; }
.listing-item { counter-increment: itemCounter; }
.listing-item > p::before { content: counter(itemCounter) '.'; }
<div class="listing-item-container">
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<div class="listing-item">
<p>FEATURES</p>
<ul> <li>list content</li> <li>list content</li> <li>list content</li> <li>list content</li> </ul>
</div>
<!-- 100 more listing-item divs present here -->
</div>
I tried to do a dropdown menu using Superfish. However, the drop down doesn't seems to be working. All scrips and link are directed to the js/css file. I have also done the script that needed to ready the function. But it doesn't seems to work. note I'm doing this on static html.
I have tried to change the source file name to check whether is it source issue, but doesn't seems to be, as I still can take in my main.css but not the superfish.css or .js file. I have also did comparison with some other website that uses superfish, seems to be the same.
<link href="http://localhost:8383/1004Project/public_html/css/superfish.css" rel="stylesheet" media="screen">
<script src="http://localhost:8383/1004Project/public_html/js/jquery.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/superfish.js"></script>
<script src="http://localhost:8383/1004Project/public_html/js/hoverIntent.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish();
});
</script>
<nav id="primary-menu">
<ul class="sf-js-enabled">
<li><div>Project's Stories</div></li>
<li><div>Menus</div></li>
<li><div>Promotions</div></li>
<li><div>Celebration Tips</div></li>
<li class="sub-menu">
<a href="#" class="sf-with-ul">
<div>Help</div>
</a>
<ul style="display: none;">
<li>
<div>FAQ</div>
</li>
<li>
<div>Feedback</div>
</li>
<li>
<div>Contact Us</div>
</li>
</ul>
</li>
</ul>
</nav>
I'm hoping the dropdown menu to work. It doesn't even have the dropdown.
Here is an working sample example
Your code need some css changes too so i referred some basic example from
here
Also make sure all the scripts are loading properly and you are not having any errors in browser console too regarding the scripts.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js">
</script>
</head>
<div id="sample1" class="clearfix">
<ul id="sample-menu-1" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
<li class="current">menu item
<ul style="display: none;">
<li>menu item</li>
<li class="current">menu item
<ul style="display: none;">
<li class="current">menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
<li>menu item
<ul style="display: none;">
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
<li>menu item
<ul style="display: none;">
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</li>
</ul>
</li>
<li>menu item</li>
</ul>
</div>
<script>
jQuery(document).ready(function () {
$('ul.sf-menu').superfish();
});
</script>
you need to make sure the document ready is placed after your html body.
if u place in top of body, it wont work because the dom element is not created yet.
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 am trying to hover over one div and make it not only trigger the hoverstate for the div I am hovering on but also a div elsewhere on the page. How can I do this. Using JavaScript or JQuery would be fine. Here is what my code looks like:
<div class="wrapper">
<div class="col-left-3">
<a href="http://example.com">
<div class="details-wrap">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
<div class="col-left-3">
<a href="http://example.com">
<div class="details-wrap">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
<div class="col-left-3">
<a href="http://example.com">
<div class="details-wrap">
<h3>Title</h3>
<p>Description</p>
</div>
</a>
</div>
<div class="full-width-col">
<a href="http://example.com">
<div class="bottom-details-wrap">
<h3>Title</h3>
<p>Description</p>
<div class="full-width-column-container">
<div class="col-left-3-res">
<h3>Col 1 title</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="col-left-3-res">
<h3>Col 2 title</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="col-left-3-res">
<h3>Col 3 title</h3>
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
</div>
</div>
</a>
</div>
</div>
I am looking to rollover the div with the class "details-wrap" and trigger a hoverstate on the div with the class "bottom-details-wrap". As you can see these are inside of other divs, so I am thinking I will need to target it using Javascript not just CSS. But I am not sure how to do that. Any help would be useful.
You can use the .hover() function in jQuery.
JSFIDDLE
$( 'element' ).hover( function() {
//do what you want to elements here.
}
);
In jQuery, if you apply the .hover() method to $('.details-wrap') you can then add a function which applies effects to $('.bottom-details-wrap'):
$(document).ready(function(){
$('.details-wrap').hover(function(){
$('.bottom-details-wrap') [...rest of function here...]
});
});
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>