I just want to create simple menu links inside some divs? - javascript

I just want to create simple menu links inside some animated divs , the problems is the div disapper if the mous move over the (li) inside it but if the div empty it works fine ?
first thing just come to my mind is i have to prevent event propagation , so i added this to the elements inside the sum menu ( the (li)) but is still face the same problem.
function hidemneu() {
$('#submenu1').hide('fold', 'slow');
$('#submenu2').hide('fold', 'slow');
$('#submenu3').hide('fold', 'slow');
$('#submenu4').hide('fold', 'slow');
}
$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);
$('#btn1').on('mouseover', function() {
hidemneu();
$('#submenu1').offset({
left: $('#btn1').offset().left
});
$('#submenu1').show("fold");
});
$('#btn2').on('mouseover', function() {
hidemneu();
$('#submenu2').offset({
left: $('#btn2').offset().left
});
$('#submenu2').show("fold");
});
$('#btn3').on('mouseover', function() {
hidemneu();
$('#submenu3').offset({
left: $('#btn3').offset().left
});
$('#submenu3').show("fold");
});
$('#btn4').on('mouseover', function() {
hidemneu();
$('#submenu4').offset({
left: $('#btn4').offset().left
});
$('#submenu4').show("fold");
});
$("a").on('mouseover', function(event) {
event.stopPropagation();
});
$("li").on('mouseover', function(event) {
event.stopPropagation();
});
$("ul").on('mouseover', function(event) {
event.stopPropagation();
});
#btn1,
#btn2,
#btn3,
#btn4 {
display: inline-block;
background-color: #ff8d73;
width: 100px;
outline: 1px dashed #000000;
padding-right: 30px;
}
#menu-wrapper {
width: 100%;
background-color: #b7dcff;
text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
width: 300px;
height: 200px;
outline: 1px dashed #000000;
float: left;
left: 0;
position: absolute;
display: none;
}
#submenu1 {
background-color: #f00700
}
#submenu2 {
background-color: #a6baf0
}
#submenu3 {
background-color: #7af044
}
#submenu4 {
background-color: #f0dc35
}
#sub_wrapper:after {
clear: both;
}
li,
a {
outline: 1px dashed #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
<div id='btn1'>button 1</div>
<div id='btn2'>button 2</div>
<div id='btn3'>button 3</div>
<div id='btn4'>button 4</div>
</div>
<div id="sub_wrapper">
<div id="submenu1">
<ul>
<li>option 1</li>
<li>oprion 2</li>
</ul>
</div>
<div id="submenu2">
clcik me 1
</div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>

Changing line 8 of the javascript seems to do the trick:
from:
$('#submenu1, #submenu2, #submenu3, #submenu4 ').on('mouseout', hidemneu);
to
$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);
function hidemneu() {
$('#submenu1').hide('fold', 'slow');
$('#submenu2').hide('fold', 'slow');
$('#submenu3').hide('fold', 'slow');
$('#submenu4').hide('fold', 'slow');
}
$('#submenu1, #submenu2, #submenu3, #submenu4 ').mouseleave(hidemneu);
$('#btn1').on('mouseover', function() {
hidemneu();
$('#submenu1').offset({
left: $('#btn1').offset().left
});
$('#submenu1').show("fold");
});
$('#btn2').on('mouseover', function() {
hidemneu();
$('#submenu2').offset({
left: $('#btn2').offset().left
});
$('#submenu2').show("fold");
});
$('#btn3').on('mouseover', function() {
hidemneu();
$('#submenu3').offset({
left: $('#btn3').offset().left
});
$('#submenu3').show("fold");
});
$('#btn4').on('mouseover', function() {
hidemneu();
$('#submenu4').offset({
left: $('#btn4').offset().left
});
$('#submenu4').show("fold");
});
$("a").on('mouseover', function(event) {
event.stopPropagation();
});
$("li").on('mouseover', function(event) {
event.stopPropagation();
});
$("ul").on('mouseover', function(event) {
event.stopPropagation();
});
#btn1,
#btn2,
#btn3,
#btn4 {
display: inline-block;
background-color: #ff8d73;
width: 100px;
outline: 1px dashed #000000;
padding-right: 30px;
}
#menu-wrapper {
width: 100%;
background-color: #b7dcff;
text-align: center;
}
#submenu1,
#submenu2,
#submenu3,
#submenu4 {
width: 300px;
height: 200px;
outline: 1px dashed #000000;
float: left;
left: 0;
position: absolute;
display: none;
}
#submenu1 {
background-color: #f00700
}
#submenu2 {
background-color: #a6baf0
}
#submenu3 {
background-color: #7af044
}
#submenu4 {
background-color: #f0dc35
}
#sub_wrapper:after {
clear: both;
}
li,
a {
outline: 1px dashed #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="menu-wrapper">
<div id='btn1'>button 1</div>
<div id='btn2'>button 2</div>
<div id='btn3'>button 3</div>
<div id='btn4'>button 4</div>
</div>
<div id="sub_wrapper">
<div id="submenu1">
<ul>
<li>option 1</li>
<li>oprion 2</li>
</ul>
</div>
<div id="submenu2">
clcik me 1
</div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>

Related

making two anchor tags with jquery

I am looking to add two anchor links when the mouse enters #introand hide intro and when the mouse leaves the original intro shows.
$("#intro").on("mouseenter", function() {
var link = $("<a>");
var link2 = $("<a>");
link.attr("href", "en.html");
link2.attr("href", "fr.html");
link.text("Welcome!");
link2.text("Bienvenue!");
$("#intro").addClass("link link2");
$("#intro").html(link && link2);
});
$("#intro").on("mouseleave", function() {
show(slow, this)
});
jQuery:
$(document).ready(function(){
$("#intro").mouseover(function() {
$(this).addClass("link link2");
$("#intro a").show();
$("#intro h1").hide();
});
$("#intro").mouseout(function() {
$(this).removeClass("link link2");
$("#intro a").hide();
$("#intro h1").show();
});
});
#intro {
width: 200px;
height: 200px;
background-color: red;
margin: 20px auto;
}
#intro a{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="intro">
<h1>Intro</h1>
<a href='en.html'>Welcome!</a>
<a href='fr.html'>Bienvenue!</a>
</div>
CSS:
#intro {
width: 200px;
height: 200px;
background-color: red;
margin: 20px auto;
display: flex;
justify-content: center;
align-items: center;
}
#intro a,
#intro:hover h1{
display:none;
}
#intro:hover a{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="intro">
<h1>Intro</h1>
<a href='en.html'>Welcome!</a>
<a href='fr.html'>Bienvenue!</a>
</div>

show/hide div if opened by radio selection

I have the .menu-btn successfully toggling the .menu, but:
Step 1: If a radio is selected, the .slides div should open,
Step 2: If the .menu-btn is pressed when the .slides div is open,
the .slides container should close.
Each .slide shows/hides with the radio selection using the code below, but I need to be able to animate the .slides container to follow the steps above.
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
});
$(".menu-btn").click(function() {
$(".menu").animate({
width: 'toggle',
ease: 'easeOutExpo'
}, 250);
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
});
});
.menu,
.slide {
display: none;
}
.flex,
.btn-wrap {
display: flex;
}
.menu {
height: 50px;
}
.btn,
.menu-btn {
padding: 20px;
border: 1px solid silver;
cursor: pointer
}
.slides {
border: 2px solid green;
}
.slide {
height: 50px;
width: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
Menu
<div class="menu">
<div class="btn-wrap">
<label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
<label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
</div>
</div>
</div>
<div class="slides">
<div class="slide" id="blk-1">
Slide 1
</div>
<div class="slide" id="blk-2">
Slide 2
</div>
</div>
You might have to save your actions in an variables/object.
Check here: https://codepen.io/johnsackson/pen/RyGdRp
var slideDetail = {
isRadioGroupOpen: false,
isSlideOpen: false,
value: ""
};
$(".menu-btn").click(function() {
$(".menu").toggle("slide");
if(slideDetail.isRadioGroupOpen) {
$(".slide").hide();
} else if(slideDetail.value!=="") {
$(slideDetail.value).show();
}
slideDetail.isRadioGroupOpen = !slideDetail.isRadioGroupOpen
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
var value = "#blk-" + $(this).val();
$(value).show();
slideDetail.isSlideOpen = !slideDetail.isSlideOpen;
slideDetail.value = value;
});
});
I hope this is what you are looking for.
If I understand correctly, you can use a flag to determine wether or not the menu is open.
var menu_open = false;
$(".menu-btn").click(function() {
$(".menu").animate({
width: 'toggle',
ease: 'easeOutExpo'
}, 250);
if ( menu_open ) {
$(".slide").hide();
}
});
$(function() {
$("[name=toggler]").click(function() {
$(".slide").hide();
$("#blk-" + $(this).val()).show();
menu_open = true;
});
});
.menu,
.slide {
display: none;
}
.flex,
.btn-wrap {
display: flex;
}
.menu {
height: 50px;
}
.btn,
.menu-btn {
padding: 20px;
border: 1px solid silver;
cursor: pointer
}
.slides {
border: 2px solid green;
}
.slide {
height: 50px;
width: 50px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
Menu
<div class="menu">
<div class="btn-wrap">
<label class="btn"><input type="radio" name="toggler" value="1"/>Slide 1</label>
<label class="btn"><input type="radio" name="toggler" value="2"/>Slide 2</label>
</div>
</div>
</div>
<div class="slides">
<div class="slide" id="blk-1">
Slide 1
</div>
<div class="slide" id="blk-2">
Slide 2
</div>
</div>

Pause jQuery On Hover

I just want the ability to be able to pause the animation on mouse hover. I trying to looking good way to do that, but there was some issues. I tested some hover/stop functions, but I can't get these working correctly.
jQuery(document).ready(function() {
setInterval(function() {
jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() {
if (jQuery(this).next('.slide').size()) {
jQuery(this).next().fadeIn(1000);
} else {
jQuery('#testimonials .slide').eq(0).fadeIn(1000);
}
});
}, 5000);
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
You can achieve this by calling clearInterval() when the slide is hovered, then re-creating the interval again when the mouse leaves the slide, something like this:
jQuery(document).ready(function($) {
var $slides = $('#testimonials .slide');
function beginSlideInterval() {
return setInterval(function() {
$slides.filter(':visible').fadeOut(1000, function() {
var $next = $(this).next().length ? $(this).next() : $slides.first();
$next.fadeIn(1000);
});
}, 3000);
}
var slideInterval = beginSlideInterval();
$slides.on('mouseenter', function() {
clearInterval(slideInterval);
}).on('mouseleave', function() {
slideInterval = beginSlideInterval();
});
});
#quote {
width: 100%;
height: 130px;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: 65px;
overflow: hidden;
}
#testimonials .slide {
color: #555555;
}
#testimonials .testimonial-quote {
display: inline;
width: 600px;
height: 170px;
margin: 0;
padding: 0;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote">
<div id="testimonials">
<div class="slide">
<div class="testimonial-quote">
<p>Text 1</p>
<h4 class="title">Title 1</h4>
</div>
</div>
</div>
</div>
Note that I shortened the interval to make the effect more obvious.

Hover in prepend() function

HTML:
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
jQuery:
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(".hover").fadeOut(200);
});
https://jsfiddle.net/mpd075s8/5/
Hello, I have problem with hover, look at the jsfiddle and click on button AddDiv and when hover on the green square hovered are all divs, but I would like that every div will be hovered separately. And hover doesn't work in new divs
Two things
You need to use delegated event for dynamic element
Use this for the reference of current element.
Try like following.
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function () {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
You can use $(this) jquery function
$("body").on("mouseover",".background", function () {
$(this).siblings('.hover').fadeIn(500);
});
$("body").on("mouseout",".hover", function () {
$(this).fadeOut(200);
});
https://jsfiddle.net/mpd075s8/7/

Closable div - Left div slides close, while right div width expands

I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>

Categories