Target a specific div when hovering over another - javascript

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...]
});
});

Related

How to fix SlickNav not initliazing

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

Carsouel nothing working and js code has no errors

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);

jQuery nested tab design issue in IE

In internet explorer the nested tab is displaying with black dot. Through inspect element if i did any changes in css the dot will be gone. If i do a refresh again it is coming. I don't know how to resolve.Demo is here.Following is the snippet I have used for creating the nested tab.
Thanks in advance..
<div id="tabs">
<ul>
<li>Total Pool Point </li>
<li>Vessel Details</li>
<li>Standard Voyages</li>
<li>Voyage calculation</li>
<li>Cargo Lifts</li>
<li>Performance</li>
<li>Pool Rules</li>
<li>Additional Pool Point</li>
</ul>
<div id="tabs-1">
<div id="totalpp_tab_main" ></div>
</div>
<div id="tabs-2">
<div id="vessel_tab_main" ></div>
</div>
<div id="tabs-3">
</div>
<div id="tabs-4">
<ul>
<li>Standard Voyage #1</li>
<li>Standard Voyage #2</li>
<li>Standard Voyage #3</li>
<li>Standard Voyage #4</li>
<li>Standard Voyage #5</li>
<li>Standard Voyage #6</li>
</ul>
</div>
</div>
<div id="tabs-5">
<div id="cargolc_tab_main" ></div>
</div>
<div id="tabs-6">
<div id="performance_tab_main" ></div>
</div>
<div id="tabs-7">
<div id="poolrules_tab_main" ></div>
</div>
<div id="tabs-8">
<div id="additionalpp_tab_main" ></div>
</div>
</div>
Without diving into jquery tabs, here is a quick fix:
http://jsfiddle.net/0m2zdo20/2/
Just added a css to remove theses dots.
#tabs-4 > ul > li {
list-style: none;
}
Try add to your CSS:
ul { list-style: none; }

Menu tab button doesn't work

I have a CSS menu tab which base on idTabs.js , it has 3 buttons which switch between the content appeared on the menu <div> -
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
(here its demo)
Now I try to edit it a little bit such that the button would be under the menu div -
<div>
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
</div>
<div class="usualBottom">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
but the buttons stop working , mean they don't switch the menu content .
(here its demo)
How to fix that ?
I think your selector was wrong. Instead of $("#usual1 ul").idTabs(); it should have been $(".usualBottom ul").idTabs(); . See if it works.
Demo :http://jsfiddle.net/3Njy5/3/
You need to write the ul containing tabs before the div containing content. If you need your tabs after the content or at bottom of page, you need to do that by positioning.
I believe that is because you're not constructing the tabs the correct way in your second example. I think the plugin registers the individual tab contents as siblings of the tab navigation menu, and when you move them into different parents the plugin will not work.
You can, however, change the position of the menu by moving it after the tabs: http://jsfiddle.net/teddyrised/HwfF6/1/
<div id="usual1" class="usual">
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
You should replace elements inside of the div.
<div>
<div id="usual1" class="usual">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" style="display: none;">This is tab 1.</div>
<div id="tab2" style="display: block;">More content in tab 2.</div>
<div id="tab3" style="display: none;">Tab 3 is always last!</div>
</div>
<script type="text/javascript">
$("#usual1 ul").idTabs();
</script>
</div>
If you want the tabs be inside of wrapper, use before pseudo tag.
.usual ul:before {
content: ".";
}
Example:
JS FIDDLE
Try like this,
<script type="text/javascript">
$(".usualBottom").find("ul").idTabs();
</script>
Demo : http://jsfiddle.net/3Njy5/4/

how to add class to all children of the elements when children has different tags

Hi I wandering how I can add class .draggable on each element in .edit div
This is my html:
<div class="edit" >
<h2> Some title </h2>
<a> some link</a>
<p> some paragraph </p>
<ol>
<li> some list item</li>
<li> some list item</li>
<li> some list item</li>
</ol>
</div>
I don't really know how to grab each of the elements inside .edit and add class .draggable . The desired effect would be like that:
<div class="edit" >
<h2 class="draggable" > Some title </h2>
<a class="draggable"> some link</a>
<p class="draggable"> some paragraph </p>
<ol class="draggable">
<li class="draggable">some list item</li>
<li class="draggable"> some list item</li>
<li class="draggable"> some list item</li>
</ol>
</div>
You can find each element with * selector and assign class draggable.
Try this:
$('.edit').find('*').addClass('draggable');
DEMO

Categories