Untoggle Previous Menus on click of the Next Menu Header - javascript

I have created a menu using CSS and Javascript. When I click on a menu topic (Header) it gets toggled and shows the sub categories.
What I need it to do is.. when I click on any other menu headers the previously toggled (shown) sub category should untoggle (hide) and the currently active menu header should be toggled with its sub categories. How can I achieve this?
here is my code..
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
$(".toggleBox").hide();
return true;
});
});
HTML
now it is kind of OK, but there are some weird movements when I click on it. Here is my remaining HTML code.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>
<h2 style="background-color:#DAD0D0;">NOKIA</h2>
<div class="togglebox">
<div class="content">
<center> NOKIA 8320 </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">SAMSUNG</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#DAD0D0;">SONY ERICSSON</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">ALCATEL</h2>
<div class="togglebox">
<div class="content">
<center>SAMSUNG 3242C </center>
<center>SAMSUNG 3423C </center>
<center>SAMSUNG 7642C </center>
</div>
</div>
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
CSS
h2 {
padding:10px;
font-size:10px;
color:#243953;
/* border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin: 0px;
}
.togglebox {
background-color:#F7F3F3;
border: 0px solid #a9a9a9;
/* Rounder Corner */
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
overflow: hidden;
font-size: 1.2em;
width: 196px;
clear: both;
margin-bottom:0px;
margin-top:0px;
}
.togglebox .content {
padding: 20px;

// slide toggle effect set to slow you can set it to fast too.
$(".togglebox").hide();
$(this).next(".togglebox").slideToggle("slow");
you have a capital 'B' in your hide code, $(".toggleBox").hide(); and you should swap the order of the actions hide all the "toggleboxes" (not the current one though, see below) first before triggering the H2's next slidedown
Example JSFIDDLE
edited as the above code means you can't toggle the current togglebox
// slide toggle effect set to slow you can set it to fast too.
var tb = $(this).next(".togglebox");
$(".togglebox").not(tb).slideUp();
$(tb).slideToggle("slow");
Because of later addition of more code to question;
Updated JSFiddle

I prepared a DEMO H E R E
Let me know if this suits your needs.

Related

Horizontal scrolling menu sticking after transform: translate(X) is applied, and Is it possible to detect when the user scrolls back up past an ID?

On my website, I have a case study page that is pretty long with 10 sections, so I want to create a horizontal menu with links to each section on the page. The user will be able to swipe this horizontally for the small screen devices so that the user can access links that would normally be off the viewport canvas.
I understand how to achieve all of that but what I need is this; when the user scrolls down and reaches the fifth section who's menu link is slightly off-canvas to the right, the menu will slide left enough so that the link icon appears into the viewport stopping on the far left. This will, in turn, bring the other links that follow on from that one onto the canvas too.
The problem though is that if I add a class to the scrolling menu container which assigns a transform: translate(X) value and therefore animates it to the left when the user reaches the particular section, the whole menu fixes at that point, and it's not possible for the user to then manually swipe the menu back and forth to access any menu link they desire from that point on.
I also want the same to happen in reverse, so that after the above has triggered and the menu has shifted along to the left, when the user decides to scroll back up the page and past the section that triggered the initial menu slide action, it slides back to the right to its original position.
This behavior with the menu slide being triggered should happen each and any time the user scrolls past that certain point in either direction (up or down), yet the user should still be able to manually swipe the menu to any point either way.
I know all of this must be possible using Javascript but I've tried loads of different ideas, including element.scrollintoView, which doesn't work since assigning that to one IDs in the menu doesn't slide the whole menu over. I've also tried moving the menu by adding an animated class but that didn't work either.
Update:
I've created a basic example on code pen:
https://codepen.io/creativezest/pen/MWyqPYL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Horizontal Scrolling Menu</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<wrapper>
<div class="container heading">
<h1>Horizontal Scrolling Menu</h1>
</div>
<section id="home" class="page-section">
<div class="container">
<h2>Home</h2>
</div>
</section>
<section id="news" class="page-section">
<div class="container">
<h2>News</h2>
</div>
</section>
<section id="contact" class="page-section">
<div class="container">
<h2>Contact</h2>
</div>
</section>
<section id="about" class="page-section">
<div class="container">
<h2>About</h2>
</div>
</section>
<section id="support" class="page-section">
<div class="container">
<h2>Support</h2>
</div>
</section>
<section id="blog" class="page-section">
<div class="container">
<h2>Blog</h2>
</div>
</section>
<section id="tools" class="page-section">
<div class="container">
<h2>Tools</h2>
</div>
</section>
<section id="base" class="page-section">
<div class="container">
<h2>Base</h2>
</div>
</section>
<section id="custom" class="page-section">
<div class="container">
<h2>Custom</h2>
</div>
</section>
<section id="testimonials" class="page-section">
<div class="container">
<h2>Testimonials</h2>
</div>
</section>
<section id="more" class="page-section">
<div class="container">
<h2>More</h2>
</div>
</section>
<div id="scrollmenu">
<div class="scroll-links-container">
Home
News
Contact
About
Support
Blog
Tools
Base
Custom
Testimonials
More
</div>
</div>
</wrapper>
body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
background-color: white;
}
html {
scroll-behavior: smooth;
}
wrapper {
display: block;
width: 360px;
margin: 0 auto;
background-color: black;
padding-top: 20px;
}
h1 {
font-family: sans-serif;
font-size: 3.5rem;
color: white;
padding: 0px 20px;
}
h2 {
font-family: sans-serif;
font-size: 2.5rem;
color: white;
}
section {
width: 360px;
background-color: transparent;
}
.container.heading {
padding: 20px 20px 20px 20px;
}
.container {
padding: 200px 40px 200px 40px;
}
div#scrollmenu {
position: fixed;
bottom: 0;
background-color: #333;
overflow: auto;
white-space: nowrap;
width: 360px;
margin: 0 auto;
text-align: center;
padding: 0;
margin: 0;
}
div#scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 25px 25px;
text-decoration: none;
}
div#scrollmenu a:hover {
background-color: #777;
}
.active {
background-color: #777;
}
.slide-about-left {
transform: translateX(-300px);
transition: transform 0.5s;
}
$(window).scroll(function() {
var hT = $('#about').offset().top,
hH = $('#about').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$(".scroll-links-container").addClass("slide-about-left");
}
});
</body>
</html>
You'll see I've added some javascript to attempt to get the menu to scroll left when the page is scrolled down to the #about section so that the 'about' link in the bottom menu slides to the far left of the viewport. But it doesn't seem to be working.
As I explained in my previous post, this is what I am trying to achieve as well as make the menu scroll backward so that the 'home' link is in its original position on the far left of the viewport when the user scrolls back up past the #about section.
I also need the user to still be able to manually swipe the menu left and right after the above behaviors have taken place.
I would really appreciate any help anyone can give on this.
Many thanks.
Marc

How to block a content editable at specific position if a div with style absolute position is overlapped on it

I am creating an application where I have created a MS-word type application in Jquery. Now I have a problem where I have an editor and I want to place a div 'footer' on it at some position which I can do the actual problem is that when I am placing it,the place occupied by the footer div from content-editable should be
disabled. Check this fiddle Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="wrapper" style="border:1px solid #eaedf1; width:602px; background-color:white;">
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1; padding:2px 2px 2px 2px;">
</div>
<br>
<div style="position:absolute; top:750px; width:600px; height:200px; border:1px solid #eaedf1;">
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">
</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
<div>
I'm not sure this is easily possible with one contenteditable element. I setup a basic example using multiple contenteditable elements, one for each page.
Example: https://fiddle.jshell.net/d68ew9qc/
The following snippet adds a new page if the maximum rows per page is reached and the key used was an "enter":
$(".pageEdit").on('keypress', function(e) {
var length = $(this).children().length + 1;
/* only add a new page if the next sibling is not available */
// enter
if (e.which == 13 && length >= this.getAttribute("max_rows")) {
if ($(this).parent('.page').next().length === 0) {
var newPage = $('.page').clone(true);
$('.pageEdit', newPage).html('');
newPage.appendTo('#editor');
$('.pageEdit', newPage).focus();
}
e.preventDefault();
return false;
}
});
The keypress duplicates an element with the class=".page" and emptys the contenteditable element on the newly created one.
The keyup handles the backspace deletion of empty pages.
$(".pageEdit").on('keyup', function(e) {
var length = $(this).children().length;
var total_pages = $(this).parent('.page').parent().children().length;
// backspace is not working with keypress, this portion needs some work!!!
if (e.which == 8 && $(this).parent('.page').prev().length > 0) {
if (length === 0 && total_pages > 1) {
// found via: http://stackoverflow.com/a/4238971/3298029
placeCaretAtEnd($('.pageEdit>div:last', $(this).parent('.page').prev())[0]);
$(this).closest('.page').remove();
}
}
});
The basic html for that looks like the following:
<style>
.editor {
background-color: transparent;
border: 1px solid #eaedf1;
}
.page {
width: 600px;
position: relative;
margin-top: 15px;
background-color: #fff;
}
.header {
height: 100px;
width: 100%;
margin: 0;
}
.footer {
height: 100px;
bottom: 0;
width: 100%;
margin: 0;
}
.pageEdit {
min-height: 1400px;
border: 1px solid #eaedf1;
overflow: hidden;
padding: 0;
}
/* found: http://stackoverflow.com/a/4407335/3298029 */
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
pointer-events: none;
}
</style>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="editor">
<div class="page">
<div class="header noselect">
<h2 style="text-align:center;">This is header</h2>
</div>
<div contenteditable="true" class="pageEdit" max_rows="77">
</div>
<div class="footer noselect">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
</div>
</div>
This is a fairly simple demo and many things won't work. If a line breaks to a new one, this should be handled as well.
This was only tested in Chrome which adds <div><br /></div> for a new line. Firefox only adds <br /><br />. So with that in mind the total number of rows should be calculated dynamically and not set to a fixed value because it defers from one browser to another.
Hope this gets you started.
Try css pointer-events: none; or select: none; or jQuery
$("#div").click(function(e){e.preventDefault();});
or maybe
$("#div").click(function(e){e.stopPropagation();});
(not 100% clear on your intent).
Is there any particular reason why would you want to use 'position:absolute'? I think if I change the code to work with 'relative' position, it display the results you want.
For example:
<div id="wrapper" style="border:1px solid #eaedf1; width:602px;background-color:white;">
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="overflow:hidden;height:1400px; width:600px; border:1px solid #eaedf1;">
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">
</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1;">
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
See:
https://jsfiddle.net/alejuliet/qn4k7csu/

Stack overlayed divs with absolute position

Im generating a div containing jscolor (color picker) elements.These divs are inserted in a HTML page depending on IDs.My first result was a distorted display of my targeted div as following
Thus i added a position absolute to my inserted div and made it so it's clear of my HTML but still follows my target.
the problem im having now is that with multiple inserted DIVs on the same HTML target they overlay on top of each other.Im searching for a way to stack them up so they can all be visible without distorting my HTML target.
My inserted Div code :
<div id="colorpicker1" style=" position:absolute; display:block; width:450px; margin-top:-10%; left:1px; z-index:5;">
<div class="well" style=" position:relative; width:450px; left:1px; z-index:5;" >
<button class="jscolor{valueElement:'+Myvalue+', styleElement:'+Myvalueid+'}">
Click here to pick a color
</button>
Value:
<input id="+Myvalue+" >
</div>
What i want to achieve is this
If I understand your question correctly, you can achieve what you need to, simply by applying display:inline-block to both the left-hand div (#colorpicker1) and the right-hand div.
Example:
.color-picker {
display: inline-block;
width:450px;
vertical-align: top;
}
.right-block {
display: inline-block;
width:450px;
height:450px;
background-color:rgb(0,127,0);
}
.well {
width: 400px;
margin: 2px;
padding: 12px 0 12px 12px;
background-color:rgb(239,239,239);
border: 2px solid rgb(214,214,214);
border-radius: 6px;
}
<div class="color-picker">
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
<div class="well">
<button>Click here to pick a color</button>
Value:
<input />
</div>
</div>
<div class="right-block">
</div>
If you have any questions about how the CSS in the snippet above works, please ask in the comments below.

Javascript to hide a DIV [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 6 years ago.
Improve this question
How would I utilize Javascript to show "pages" of testimonials - so that when clicking a link it shows one set of DIV's and hides the others, thereby allowing me to cycle through content using numbered links. I have attached my code of the basic design, I am just not familiar with how to use JS to actually make it function. In searching SOF all I can find is examples using Jquery scripts, but I do not have a jquery.
The objective is that when you click the "1" link in the top right corner only the blurbs with "1's" will show on the page, same with clicking the "2" link, all the 1's and 3's will disappear and only the blurbs with the 2's will show.
CSS
#charset 'utf-8';
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-color: #A8A8A8;
font-size:14px;
font-family: 'Open Sans', sans-serif;
}
box {
background-color:#FFFFFF;
width:950px;
height:400px;
margin-left:auto;
margin-right:auto;
}
.testimonialnavigation {
width:950px;
margin-left: auto;
margin-right: auto;
}
ul.testimonialpages {
list-style-type: none;
font-size: 16px;
font-weight: bold;
padding-right:30px;
}
.testimonialpages li a {
float: right;
color: #FFFFFF;
text-decoration: none;
text-align: center;
margin-left: 5px;
margin-right: 5px;
height:30px;
width:30px;
line-height:30px;
background-color:#C82633;
display:inline-block;
}
.testimonialpages li a:hover {
color: #FFFFFF;
background-color: #737373;
}
.testimonials {
clear:both;
width:875px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
background-color:#EDEDED;
min-height:50px;
border-radius: 15px;
padding:15px;
}
.testimonials:nth-of-type(odd) {
background-color:#D3D3D3;
}
.hidden {
display:none;
}
HTML
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Title</title>
<link rel='stylesheet' href='teststyle.css' />
</head>
<body>
<div class="box">
<div class="testimonialnavigation">
<ul class="testimonialpages">
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
<br><br>
<div class="container">
<div id="content1" class="testimonials">
<i>
111111 111111 111111111 11111111111
</i><br>
<b>
- 11111111111
</b>
</div>
<div id="content2" class="testimonials">
<i>
11111 111111 1111111 11111111 1111111111
</i><br>
<b>
- 11111111
</b>
</div>
<div id="content3" class="testimonials">
<i>
22222 22222222 222222 2222222 222222222
</i><br>
<b>
- 2222222
</b>
</div>
<div id="content4" class="testimonials">
<i>
2222222 222222 2222222222 222222 2222222 222222
</i><br>
<b>
- 222222
</b>
</div>
<div id="content5" class="testimonials">
<i>
333333 3333333 33333333 33333333 333333 3 33333333
</i><br>
<b>
- 33333333
</b>
</div>
<div id="content6" class="testimonials">
<i>
333333 33333333 333333 333333333333
</i><br>
<b>
- 333333333
</b>
</div>
</div>
</div>
</body>
</html>
hide
document.getElementById('id-of-some-element').style.display = 'none';
show
document.getElementById('id-of-some-element').style.display = 'block';
Consider to learn jQuery to do things easier.
You could even address the problem by using anchors (href="#some-name-in-the-page") and the CSS selector :active.
You can pass the id with an href like this:
Take me to my div
<div id="mydiv"><p>Hello</p></div>
OR:
Take me to my div
<h2 id="mydiv">My Div!</h2>
You can easily achieve that using JQuery toggle. This will hide and show based on your specified selector. It could be a class or id or an element.
Example:
<script>
$(document).ready(function(){
$("a").click(function(){
$(".testimonials").toggle();
});
});
</script>
<script>
document.getElementById('page1').addEventListener('click', function(){
document.getElementByClassNames('testimonials').style.display = 'none';
document.getElementById('content1').style.display = 'block';
});
</script>
Something like that would do the trick, obviously you need to either do something similar for each one, or refactor it to work for with each without breaking DRY principles.
Take a look at: http://www.w3schools.com/js/js_htmldom_eventlistener.asp
and: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Div menu next to the button

I have simple html page:
<html>
<head></head>
<body>
<table>
<tr>
<td>
<input type="image" src="http://backticket.com.ua/Img/addNew.jpg" onmouseover="ShowMenu();" onmouseout="HideMenu();" />
</td>
<td>
Some text that should be under appeared menu
</td>
</tr>
<tr>
<td colspan="2">
Some text that Some text that Some text that
</td>
</tr>
</table>
<div id="divMenu" style="display:none; width: 258px; padding: 8px 0px; border: solid 1px #CCC; background-color:White">
<div style="float: left; width: 140px; padding: 6px 2px;">
Print Page
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Email to a Freind
</div>
<div style="float: left; width: 140px; padding: 6px 2px;">
Add to Favorites
</div>
</div>
<script type="text/javascript">
function ShowMenu() {
document.getElementById('divMenu').style.display = '';
}
function HideMenu() {
document.getElementById('divMenu').style.display = 'none';
}
</script>
</body>
</html>
I need to show a menu in hidden div next to the button (in the right side) over the other text and elements on the page. Also menu should be visible until mouseout of the button or menu, like on hover button in AddThis service.
Who can help me with javascript?
Thanks!
Put a div-tag around your table, give it the CSS style value "float: left".
Then, you give "divMenu" the CSS style value "float: right".
The rest seems to be working fine, at least in Firefox.

Categories