How can I animate border-radius of li element with jquery? - javascript

I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :

The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY

You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});

On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Related

Multiple (2) Drag Drop JQuery

I have two drag and two drop zones that I'd like to keep exclusive from one another. I've been playing around with the connectWith argument unsuccessfully and was hoping to get some help connecting sortable_alpha to droppable_alpha and sortable_numbers to droppable_numbers. I also need to be able to use the .append function to add a delete button inside the drop divs which I have code for in the second chunk I realize there's lots of great JQuery draggable posts but couldn't find one on distinguishing separate drop zones so thanks for any help!
Drag Works but Not Drop
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable();
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>
Working on an Answer
$(function () {
$("#sortable_numbers").sortable();
$("#sortable_numbers").disableSelection();
$("#sortable_alpha").sortable();
$("#sortable_alpha").disableSelection();
// once this works for numbers repeat this for the letters?
// create drag and drop where on drop a delete button is added to the list object
$(".draggable_numbers").draggable();
$("#droppable_numbers").droppable({
drop: function (event, ui) {
// take the id of the dropped block
// then create a new, unique id
// then append a delete button to the block
// inside the drop numbers
var draggableId = ui.draggable.attr("id");
var newid = getNewId(draggableId);
$(this).append("
<div>
<div>
<div class="form-group drop_area">
<label class="control-label" for="${newid}">${newid}</label>
<button class="delete">Delete</button>
</div>
</div>
</div>")
}
}
});
});
#droppable_numbers,
#droppable_alpha {
border: dashed 1px grey;
min-height: 100px;
width:100px;
float:left;
}
#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}
ul {
list-style: none;
padding-left: 0;
}
li {
list-style-type: none;
padding-bottom: 2px;
}
#sortable_numbers li,
#sortable_alpha li {
border: 1px solid lightgray;
}
#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}
#sortable_numbers .ui-sortable-helper:hover,
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}
.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
/*
Need to change this so that the alpha blocks
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}
#droppable_numbers select {
margin: 5px;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>
<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>
<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>

OnMouseOver - add CSS to different tags than the hovered tag

I have a menu bar and around it a <div>, I have an <a> in the <div>, and when I hover the mouse on the <a> I want the left border color to change in the <div>. How can i do that?
I want to add a CSS-style to the <div> when I hover on the <a> link.
Html:
<div id="meny" class="meny">
Home
</div>
Css:
a.linksM{
color: black;
display: inline-block;
padding: 10px;
margin: 0px;
font-size: 13pt;
font-family: "vandetta", "arial", sans-seriff;
font-weight: bold;
}
div.meny{
border: solid 4px;
border-color: #82b919;
background-color: #82b919;
border-radius: 5px;
border-bottom-color: #006600;
border-top-color: #006600;
border-top: 0px;
}
#home:hover{
border-left-color: #006600;
}
The best way to do this is via CSS. In particular, you can use the pseudoclass hover
div a:hover {
border-left: 1px solid blue;
}
It's also possible to do this in native JavaScript
var myLink = document.querySelector("div a");
myLink.addEventListener("mouseover", function() {
this.parentNode.classList.add("new-border");
});
myLink.addEventListener("mouseout", function() {
this.parentNode.classList.remove('new-border');
});
And in jQuery as well
$("div a").on("mouseover", function() {
$(this).parent().addClass("new-border");
})
.on("mouseout"), function() {
$(this).parent().removeClass("new-border");
});
If you want to do it using jQuery then following code will help you.
$(document).ready(function(){
$("div a").mouseover(function(){
$("div").addClass("classname");
});
$("div a").mouseout(function(){
$("div").removeClass("classname");
});
});
You can use jQuery .parent() to target the div containing your link.
$('a').hover(function() {
$(this).parent().toggleClass('green-border');
});
Here is an example : http://jsfiddle.net/lddz/5kdo4bcm/1/
I would recommend against using javascript to achieve this.
This can be achieved using CSS in several different ways.
Here is a jsFiddle
If you use a HTML strucure for a basic menu:
<nav>
<ul>
<li>
<a href='#'>Link 1</a>
</li>
<li>
<a href='#'>Link 2</a>
</li>
<li>
<a href='#'>Link 3</a>
</li>
</ul>
</nav>
Then you can add CSS like this:
nav a {
text-decoration: none;
display: block;
padding: 6px 10px;
border-left: 2px solid transparent;
}
nav a:hover {
border-left: 2px solid red;
}
give the div 2 classes
HTML code
<div id="link-container" class="normal">
Link Name
</div>
CSS code
div.normal {
position: relative;
margin: 0 0 0 3px;
padding: 5px 20px;
width: 100px;
height: 50px;
background: none;
color: rgba(0, 0, 0, 1);
border: 2px groove rgba(0, 0, 0, 1);
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
div.hover {
border-left: 5px solid purple;
margin: 0;
}
#link {
color: black;
font-family: "Courier New";
font-weight: 400;
line-height: 50px;
text-decoration: none;
text-align: center;
width: 100%;
height: 100%;
}
#link:hover {
font-weight: 900;
text-decoration: underline;
}
Javascript/jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#link-container').removeClass('hover'); //prevents on load accidental hover and glitching
$('#link').on('mouseover', function(){
$('#link-container').addClass('hover')}).on('mouseout', function() {
$('#link-container').removeClass('hover')
});
});
</script>

jQuery dropdown menu with css

I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?
You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle
use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});
Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>

getting css objects to change on hover and click

I'm having a problem with my css code, I want a list item to stay the same after it is clicked on. This is my CSS.
.exploreheadings{
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 30px;
-webkit-transition: font-size .7s;
transition: font-size .7s;
}
.exploreheadings:hover{
font-size: 50px;
}
.exploreheadings:active{
font-size: 50px;
}
.exploreheadings:visited{
font-size: 50px;
}
and this is my html
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
Is there any way I can get this to stay the same after I hover over it and click on it, I tried the visited selector, but to no avail. I am semi-new in the programming world, so it might be a stupid mistake, but can anyone help? I am also comfortable in using jQuery, so if thats what it has to be, I'm fine with it.
Without much context, try the following code. It'll persist your visual states:
<ul>
<li class="exploreheadings" onclick="setactive(this);">people</li>
<li class="exploreheadings" onclick="setactive(this);">hashtags</li>
<li class="exploreheadings" onclick="setactive(this);">businesses</li>
</ul>
<script>
function setactive(d){
var os=d.parentNode.getElementsByTagName('li');
for (var i=0;i<os.length;i++){
var o=os[i];
o.style.fontSize='30px';
}
d.style.fontSize='50px';
}
</script>
If using jQuery is an option, following sets the font-size and removes the transition:
$(".exploreheadings").click(function () {
$(this).css({
"transition": "none",
"font-size": "50px"
});
});
.exploreheadings {
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 30px;
-webkit-transition: font-size .7s;
transition: font-size .7s;
}
.exploreheadings:hover {
font-size: 50px;
}
.exploreheadings:active {
font-size: 50px;
}
.exploreheadings:visited {
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
Update: to change the other li elements back to 30px font size when another li is clicked, following approach using toggleClass() and an additional class active that is a copy of the class exploreheadings with the adjusted font-size of 50px and without the transition:
$(document).ready(function () {
$("li").click(function () {
$("li.active").toggleClass("exploreheadings active");
$(this).toggleClass("exploreheadings active");
});
});
.exploreheadings {
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 30px;
-webkit-transition: font-size .7s;
transition: font-size .7s;
}
.active {
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 50px;
}
.exploreheadings:hover {
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
Two of the pseudo-classes you're using (:active, and :visited) only work on a elements.
Add a elements to your HTML as follows:
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
Then change your CSS to style link states on the a elements rather than on the li elements:
.exploreheadings a:hover {
font-size: 50px;
}
.exploreheadings a:active {
font-size: 50px;
}
.exploreheadings a:visited {
font-size: 50px;
}
**Edited to clarify that while :hover works with other elements, :active and :visited work only with a elements.

jQuery Submenu not disappearing unless it is hovered once

Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}
Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO

Categories