Develop Reference

jquery div slide effect with another div adjusting width automatically

I am trying the giva a menu slides in/out effect to give the main content more space whenever user wants - More like the Google Calendar hamburger menu click behaviour.
I am trying to have two divs side-by-side. 1st is menu, 2nd is other content. Using jQuery UI I am trying toggle slide the 1st div.
Two issues -
Only when I give fixed width to 2nd div, I am able to place them side-by-side.
How to make the second div takes rest of the space?
Only after completion of the slide-out 2nd div adjust its width.
How to make increase the width smoothly?
Here is the code https://codepen.io/coder92/pen/Yjomwd
$(document).ready(function(){
//adds click function to the hamburger menu
$( "#menu" ).click(function() {
$(".menuDiv").toggle('slide');
});
});
.menuDiv{
background-color: green;
width:200px;
float:left;
}
.contentDiv{
//width:100%;
width:500px;
color:white;
background-color:blue;
float:left;
}
<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>
<span id="menu"> toggle </span>
<div>
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Thanks in advance!

For the smooth sliding you can use
$(".menuDiv").animate({width: 'toggle'}, 350);
And to make the data take up the rest of the page
Remove float: left; from .contentDiv (Float makes the element not take full size)
Add margin: 0 auto; (This makes the data take the full rest of the page)
Add overflow: hidden (this stops the blue from going under the green)
Check it out: https://codepen.io/Funce/pen/QBeLOr

The way Google Calendar do it is to utilize a combination of flex display, hidden overflow and negative margin to achieve the effect. You may refer to the sample below:
$(document).ready(function(){
//adds click function to the hamburger menu
$("#menu").click(function () {
var $menu = $(".menuDiv");
if ($menu.is(':visible')) {
$menu.animate({'margin-left':-200}, function() {
$menu.hide();
});
} else {
$menu.show().animate({'margin-left':0});
}
});
});
.containerDiv {
display: flex;
overflow-x: hidden;
}
.menuDiv{
background-color: green;
width:200px;
}
.contentDiv{
color:white;
background-color:blue;
float:left;
flex:1 1 auto;
}
<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>
<span id="menu"> toggle </span>
<div class="containerDiv">
<div class="menuDiv">
Menu
</div>
<div class="contentDiv">
<table>
<tr>
<td> data </td>
</tr>
</table>
</div>
</div>
Note that I use the jQuery animate method, while Google Calendar use the CSS transition for theirs.

Click numbered div to show/hide table of same number

I have a series of tabs (divs) that are being automatically numbered on page load and a series of tables also being automatically numbered. What is a short jquery script to show/hide the tables based on the div clicked. Ex. "tab1" shows/hides "table1", "tab2" shows/hides "table2", etc.
I was hoping for a way to have this work for an infinite amount of these pairs, rather than writing
$('.tab1').click(function(){
$('.table1').toggle();
});
$('.tab2').click(function(){
$('.table2').toggle();
});
for each one
EDIT:
Link to example: https://jsfiddle.net/captainmorganms/o1ndn2b2/3/

for(var c=1;c<=your_no;c++){
$('.tab'+c).click(function(){
$('.table'+$(this).attr("class").replace("tab","")).toggle();
});
}
Just use a simple for loop for it to work!

You can do it like this:
$('.tab1,.tab2,.tab3').on('click',function(){
$('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});
For unknow number of tables, in your case, select tabs like this:
$('.section div')
Full example here https://jsfiddle.net/_jakob/o1ndn2b2/4/
I set tables hidden by default but you can remove it in CSS if you want them to be shown at start.

Given the markup provided in the example Fiddle, you can achieve this for any number of tables with a single event listener and a few extra attributes, like so:
document.querySelector(".section").addEventListener("click",function(event){
var target=event.target,table;
if(table=target.dataset.table)
if(table=document.getElementById(table))
table.classList.toggle("hide");
},0);
.section>div{
display:inline-block;
cursor:pointer;
margin:0 5px;
border:1px solid;
padding:3px;
}
table{
border:1px solid;
border-collapse:collapse;
margin-top:15px;
}
table.hide{
display:none;
}
td{
border:1px solid;
padding:5px;
min-width:50px;
height:30px;
}
<div class="section">
<div data-table="table1">Tab1</div>
<div data-table="table2">Tab2</div>
<div data-table="table3">Tab3</div>
</div>
<table class="hide" id="table1">
<tr><td>Table 1</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table2">
<tr><td>Table 2</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<table class="hide" id="table3">
<tr><td>Table 3</td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

Floating visible div inside horizontal scrollable div CSS

The issue is the following :
I have a calendar in which the user can create an appointment (using DHTMLX Scheduler Timeline View), the main problem is the Scheduler doesn't support a scrollable view , only fits the schedule into the view.
I Solve the previous problem, creating a div with a FIXED width (in this way can i have a longer horizontal scheduler ) and wrapping it inside a div that allows to scroll horizontally its content.
However , I dont have a clear idea of how to solve the following problem caused :
When the calendar is loaded , you can see which div belongs to its horizontal Row
And when the user scrolls horizontal (to see 7:00 PM for example)
You cannot see in which div with color you need to create the appointment !
So i need something like this, where the div is still visible although the user scrolls horizontally :
I already tried with something like the following :
May be a problem too with the parent container, because it hides the div if the following works maybe ?
.visible-division{
position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
float:left;
z-index:9000;/*a higher z-index in case something cover the div*/
}
without any luck ..
My CSS
#calendar-container{
width: 2000px;
}
#calendario {
height: 900px;
width: 100%;
border: 1px solid #cecece;
}
.scrolling_container {
height: 100%;
overflow: auto;
}
And my Markup
<div class="scrolling_container">
<div id="calendar-container">
<div class="dhx_cal_container panel" id="calendario">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab"></div>
<div class="dhx_cal_tab" name="week_tab"></div>
<div class="dhx_cal_tab" name="month_tab"></div>
<div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<div class="well text-right">
<div>
a link
</div>
</div>
</div>
It can be solved via CSS ? Otherwise, Should I apply classes to it in case of scroll event ?
Any help is appreciated, thanks !

This may help you do the trick.
.visible-division{
position:fixed;
width: /* specifiy */
height: /* specify */
top: /* specify */
left: /* specify */
}
.scrolling_container {
height: 100%;
overflow: auto;
}
Though not supported by most browser, you may try sticky position value position: sticky.

Hope this will be helpful, apply this class to the floating div only.
.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}

Double ToolTip on same mouseover using javascript

I'm having a problem in using the tooltip from wz_tooltip.js on a while function.
I want when I use the mouseover function for the tooltip to appear , I want to make 2 of them with separate text for each other.
When I'm using the double quotes only one of them is appearing.
Where is my code wrong and doesen't make the second tooltip appear next to it and to have different size and text?
echo "
<a href=\"".$optiune."\" onmouseover=
\"Tip('<div class=split-para>Tip:".$informatie['tip']."<span>(si aici raritatea)</span></div>
<br> <center>".$informatie['nume_ro']." ".$variabila_echipat." ".$variabila_enchant."
</center> ".$variabila_putere." ".$variabila_procent_putere."
".$variabila_dex." ".$variabila_procent_dexteritate." ".$variabila_rez."
".$variabila_procent_rezistenta." ".$variabila_carisma."
".$variabila_procent_carisma." ".$variabila_intel."
".$variabila_procent_inteligenta." ".$variabila_pret_cumparare."
".$variabila_atac." ".$variabila_procent_atac." ".$variabila_aparare."
".$variabila_procent_aparare." ".$variabila_posibilitatea_daune."
".$variabila_daune_min." ".$variabila_procent_daune_minime."
".$variabila_daune_max." ".$variabila_procent_daune_maxime."
".$variabila_viata." ".$variabila_viata_reg." ".$variabila_mana."
".$variabila_mana_reg." ".$variabila_enchant_grad_tip." ".$variabila_cantitate."
".$variabila_posibilitate_vanzare." ".$variabila_pret_vanzare." <center><br>
".$variabila_posibilitate_echipare." ".$mesaj_set." <br><br> ".$variabila_niv_min."
</center>')
;\"Tip(' test ')\"
onmouseout=\"UnTip()\">
<img src='".$informatie['cale_imagine']."/".$informatie['imagine'].".png'
alt=".$informatie['id']." ></a>
";
The whole function is retriving some info for some objects and echo it when you user the mouseover over some picture.
I want when I use the mouse over that picture , 2 tooltips in the right of the picture not only one
Here's a working fiddle : http://jsfiddle.net/alexgoaga/yjv1Ltre/1/ , press ok when the error appears
Thank you :)

So, unfortunately it looks like the way wz_tooltip works is by adding a div element to the body and then toggling its visibility, contents and position.
Unfortunately that means that you will likely need to add both of your desired elements inside the one tooltip if you want to keep using wz_tooltip.
HTML
<a href="#" onmouseover="Tip('<div id=\'element1\'>section1</div><div id=\'element2\'>section2</div>');" onmouseout="UnTip()">
<img src="http://84.232.199.159/img/items/ar_bow.png" alt="" />
</a>
CSS
#WzTtDiV{
overflow:visible !important;
}
#WzBoDy{
background:none !important;
border:none !important;
outline:none !important;
box-shadow:none !important;
}
#element1,
#element2{
color:white;
position:absolute;
}
#element1{
top:0;
left:0;
height:20px;
width:auto;
padding:0 30px;
background:blue;
}
#element2{
top:30px;
left:20px;
height:40px;
width:auto;
background:red;
}
Have a look at this example

How to hide/show div with javascript

I want to achieve hide/show with div's in html but in this way.
Here is my html:
<div id="left"></div>
<div id="middle">
<input type="button" id="button"/>
</div>
<div id="right"></div>
And this is my css:
body
{
height: 100%;
margin: 0;
padding: 0 ;
border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
float:left;
width:11%;
height:570px;
margin:0;
}
I want to do that when I click button on div center to hide div right and to expand divleft for the size of the div right and then move div center all the way to the right. I want to hide/show them with horizontal animation, such as from left to right or right to left.
Playing with the words can be tricky so I made a little pictures so you can actually see what am I talking about:
Start phase:
And end phase:

You can see a working demo here... http://jsfiddle.net/miqdad/3WDbz/
or you can see other demo which increment width of first div here .. http://jsfiddle.net/miqdad/3WDbz/1/

I had almost the same question a couple of days ago and maybe it helps you too.
this example uses a checkbox to hide the div. and make the other div 100% width.
javascript, When right div is hidden left div has to be 100% width.
the javascript code from the example:
$(function() {
$("#foo").on("click",function() {
if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
$('#checked-b').css("width","60%");
$('#checked-a').css("width","40%");
}) ;
else $('#checked-a').show('fast',function(){
$('#checked-b').css("width","100%").show();
$('#checked-a').css("width","0%").hide();
});
});
});
and an example:
http://jsfiddle.net/mplungjan/5rdXh/

This is one of the best ways to hide a div element using JavaScript:
<html>
<head>
<script>
function hideDiv() {
document.getElementById("myP2").style.visibility = "hidden";
}
</script>
</head>
<body>
<button onClick="hideDiv()">Hide</button>
<br>
<br>
<p id="myP2">Hello world!</p>
</body>
</html>

Implementing with JQuery is easy. Have a look at this JSFiddle example: http://jsfiddle.net/q39wv/2/
(To all: Normally I wouldn't put only a JSFiddle link here, but this time I think it's worth showing the OP how the whole thing works, with some adjustments to his HTML and CSS).
A Javascript-only solution would be much more difficult to implement.