Slippry slider images navigate to page other than defined href="" - javascript

Here is my page:http://www.candoor.ca/index-1.html
The slider I used is slippry slider. Can be downloaded at http://slippry.com
If I click the banner image it loads about us page while in HTML I've this:
<ul id="slippry-demo">
<li>
<a href="/cat_name/Commercial-Garage-Doors.aspx">
<img src="img/commercial-industrial-doors.jpg" alt="Commercial and Industrial Doors">
</a>
</li>
<li>
<a href="/cat_name/Loading-Dock-Products.aspx">
<img src="img/loading-dock-products.jpg" alt="Loading Dock Products and Equipment">
</a>
</li>
<li>
<a href="/cat_name/Roll-Up-Shutters.aspx">
<img src="img/grilles-shutters.jpg" alt="Shutters and Grilles">
</a>
</li>
<li>
<a href="/cat_name/Residential-Garage-Doors.aspx">
<img src="img/residential-garage-doors.jpg" alt="Residential Garage Doors">
</a>
</li>
<li>
<a href="/cat_name/Commercial-Door-Operators.aspx">
<img src="img/garage-gate-operators.jpg" alt="Commercial Operators, Garage and Gate Openers">
</a>
</li>
<li>
<a href="/about-candoor.aspx">
<img src="img/authorized-distributor.jpg" alt="Authorized Distributor">
</a>
</li>
</ul>

without the empty div you have added it will work fine try this :
<ul id="slippry-demo">
<li>
</li>
<li>
</li>
<li>
</li>
<li>
<img src="img/residential-garage-doors.jpg" alt="Residential Garage Doors">
</li>
<li>
</li>
<li>
</li>
</ul>

Related

How to select the direct nth child where there are several dropdown lists?

I have a html code below, the jsfiddle link is https://jsfiddle.net/Debra321/b0d4Lupn/
<html>
<body>
<div class="side-collapse in" id="site-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="/" target="_self">
Home
</a>
</li>
<li class="dropdown dropdown-hover open">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Store <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a class="itemlistChange" data-url="/store/products" target="_self">
All Products
</a>
</li>
<li class="">
<a class="itemlistChange" data-url="/store/cart" target="_self">
My Cart
</a>
</li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/promotions">Promotions</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/patches">Patches</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/skincare">Skin Care</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/maintenancekits">Maintenance Kits</a></li>
<li class="regularcategory"><a class="itemlistChange" data-url="/store/products/salestools">Sales Tools</a></li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Commissions <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/commissions" target="_self">
Commissions
</a>
</li>
<li class="">
<a href="/rank" target="_self">
Rank Advancement
</a>
</li>
<li class="">
<a href="/volumes" target="_self">
Volumes
</a>
</li>
<li class="">
<a href="/commissions/myearnings" target="_self">
Earnings
</a>
</li>
<li class="">
<a href="/commissions-earnings" target="_self">
Commissions Earnings
</a>
</li>
<li class="">
<a href="/commissions/incomestatement" target="_self">
Income Statement
</a>
</li>
<li class="">
<a href="/commissions/commissionspaycard" target="_self">
Commissions Pay Card
</a>
</li>
<li class="">
<a href="/volume-maturity-calendar" target="_self">
Volume Maturity Calendar
</a>
</li>
<li class="">
<a href="/carry-over-volume-calendar" target="_self">
Carry Over Volume Calendar
</a>
</li>
<li class="">
<a href="/commissions/matchingbonus" target="_self">
Bonus Qualification
</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-hover">
<a class="dropdown-toggle" data-toggle="dropdown">Organization <b class="caret"></b></a>
<ul class="dropdown-menu col-2">
<li class="">
<a href="/app/enrollmentredirect" target="_blank">
<i class="fa-plus"></i>
Enroll new...
</a>
</li>
<li class="">
<a href="/prepopulatedcartlist" target="_self">
Pre Populated Cart Builder
</a>
</li>
<li class="">
<a href="/personally-enrolled-team" target="_self">
Personally Enrolled Team
</a>
</li>
<li class="">
<a href="/upcoming-promotions" target="_self">
Upcoming Rank Promotions
</a>
</li>
<li class="">
<a href="/new-distributors" target="_self">
New Distributors List
</a>
</li>
<li class="">
<a href="/recent-activity" target="_self">
Recent Activity List
</a>
</li>
<li class="">
<a href="/retail-customers" target="_self">
Retail Customers
</a>
</li>
<li class="">
<a href="/preferred-customers" target="_self">
Preferred Customers
</a>
</li>
<li class="">
<a href="/reps" target="_self">
Reps
</a>
</li>
<li class="">
<a href="/binary-tree-viewer" target="_self">
Binary Tree Viewer
</a>
</li>
<li class="">
<a href="/organization/enrollertreeviewer" target="_self">
Enroller Tree Viewer
</a>
</li>
</ul>
</li>
<li>
<a href="/events" target="_self">
Events
</a>
</li>
<li>
<a href="/AutoOrder" target="_self">
Monthly Subscription Orders
</a>
</li>
<li>
<a href="/orders" target="_self">
Orders
</a>
</li>
<li>
<a href="/resources/resourcelist" target="_self">
Resources
</a>
</li>
<li class="visible-xs">
<a href="/logout" target="_self">
Sign out
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
I expect to select Organization>Binary Tree Viewer, but cannot do that successfully. Since Organization is the direct 3rd child of the ul, I try to retrieve it by
document.querySelector('#site-navigation-navbar-collapse ul > li:nth-child(3)')
But what I got is always "Promotions" in "Store". How to select the Binary Tree Viewer by CSS selectors? Any suggestions are appreciated.

How to cut part of the string within a word of a random number of labels inside a list?

This is a simple example of what I have:
<div>
<ul>
<li>
<a href="">
<label>Example1 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example2 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example3 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example4 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example5 something I don't want</label>
</a>
</li>
</ul>
</div>
The structure of code I have is this one. This is generated automatically, so In this <div> some times there are more <li> tags(with it's content inside) or less depending on what data it gets from database.
What I want to do is with javascript and jquery get the list and cut the content of the labels from the word 'something' till the end of it so it does not appear.
The word is always de same (something), so what I want to do is read that word and cut it out with the rest of text it comes behind it.
The result should be this:
<div>
<ul>
<li>
<a href="">
<label>Example1</label>
</a>
</li>
<li>
<a href="">
<label>Example2</label>
</a>
</li>
<li>
<a href="">
<label>Example3</label>
</a>
</li>
<li>
<a href="">
<label>Example4</label>
</a>
</li>
<li>
<a href="">
<label>Example5</label>
</a>
</li>
</ul>
</div>
I hope I explained myself right.
If you have any questions ask me!
You can use substr():
var cutWord = 'something';
$('ul li').each(function(){
var text = $(this).find('label').text();
var newText = text.substr(0, text.indexOf(cutWord)).trim();
$(this).find('label').text(newText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>
<a href="">
<label>Example1 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example2 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example3 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example4 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example5 something I don't want</label>
</a>
</li>
</ul>
</div>
Since there is a space behind them you can split the string on space.
$('label').each(function(){
var splitted = $(this).text().split(" ");
$(this).text(splitted[0]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>
<li>
<a href="">
<label>Example1 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example2 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example3 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example4 something I don't want</label>
</a>
</li>
<li>
<a href="">
<label>Example5 something I don't want</label>
</a>
</li>
</ul>
</div>

cascade check with nested checkboxes

I'm trying to implement a cascade check on a nested list with checkboxes.
I'm using this answer from ᾠῗᵲᄐᶌ as a guide.
I'm having trouble dealing with the check/uncheck of the parents of a given node. I can check all parents but uncheck only fist one and I can't figure out what I'm doing wrong.
HTML
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
JS
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").prop("checked", function()
{
return $(this).parent("a").next("ul").find(":checked").length;
});
});
FIDDLE: https://jsfiddle.net/h8hzj01q/
The problem was that the statement $(this).parents("ul").prev("a").find("input:checkbox") traverses the dom from top to bottom, i.e. from topmost ul to the lowest. You need this in reverse, to make all the parent checkboxes unchecked. Reversing the jquery object obtained from $(this).parents("ul").prev("a").find("input:checkbox") and using each loop, the desired result is obtained.
The example that you included worked as it uses prev which traverses bottom to top, while you're using find that traverses from top to bottom
Changed your code to work like this:
jQuery.fn.reverse = [].reverse;
$("input:checkbox").click(function()
{
var isChecked = $(this).is(":checked");
//down
$(this).parent().next().find("input:checkbox").prop("checked", isChecked);
//up
$(this).parents("ul").prev("a").find("input:checkbox").reverse().each(function(a, b) {
$(b).prop("checked", function()
{
return $(b).parent("a").next("ul").find(":checked").length;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A2</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE A3b2</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE B</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C1</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2</span>
</a>
<ul>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2a</span>
</a>
<ul></ul>
</li>
<li>
<a href="#">
<input type="checkbox"><span>NODE C2b</span>
</a>
<ul></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Hover delay for parent of Dropdown jQuery

I am trying to create a dropdown menu. This code for it is:
<script type="text/javascript">
$(document).ready(function(e) {
$('.has-sub').hover(function() {
$(this).toggleClass("tap", 350, "easeOutSine");
});
});
</script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over "Flight Briefing" for 2 seconds for the Dropdown menu to appear.
I have tried some other solutions that were provided with different questions, but they did not work.
Your .hover() function is a little wrong - you need a mouseenter and mouseleave function - I have set a timer of 2000 ms (2s) by using setTimeout() to give the 2 sec delay (although in my opinion thats a really long time to hover on an element beforehte effect occurs) and have the mouseout hide the ul directly. I am showing the ul buy habing the .has-sub ul have a display:none and then by adding the .tap class- display:block.
$(document).ready(function(){
$('.has-sub').hover(
function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
function(){$(this).removeClass("tap"); clearTimeout()}
);
});
.has-sub ul{display:none}
.tap ul{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
Here you go. If you need anything else, let me know.
$('.link').mouseenter(function(){
int = setTimeout(() => {
$('.dropdown').fadeIn();
}, 2000);
}).mouseleave(function(){
clearTimeout(int);
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html" class='link'>
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul class='dropdown'>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>

Check if a <li> contain <a> with a certain class

I have this and I want to check the first <li> who contains <a> with the class .selected.
I have tried this : $( "li a" ).first().hasClass('selected') but my <li> isn't detected.
Here is my HTML code.
<ul>
<li>
<a class="thumbnail selected">
<img src="thumb1.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb2.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb3.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb4.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb5.jpg">
</a>
</li>
</ul>
Could you help me ?
You can use .has() like
$('li:has(a.selected)').first().addClass('found')
.found {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a class="thumbnail selected">
<img src="thumb1.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb2.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb3.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb4.jpg">
</a>
</li>
<li>
<a class="thumbnail unselect">
<img src="thumb5.jpg">
</a>
</li>
</ul>
For the first Selected anchor tag simply try this
$('li a.selected:first')

Categories