Develop Reference

How do I add a paragraph's width with each click with Javascript?

I want to be able to add width to my paragraph with each click with Javascript. What am I doing wrong? Here is my code :
let button = document.querySelector("button");
button.addEventListener("click",function(e) {
let p = document.querySelector("p");
if(window.getComputedStyle(p).getPropertyValue("width")==="10px")
{
p.style.width = "10px";
p++;
}
else
{
console.log(false)
}
});
p {
box-shadow: 0 4px 8px rgb(0,0,0,0.4);
height: 40px;
width: 10px;
display: block;
}
<button>click!</button>
<p>my paragraph</p>

Your if condition is wrong, since you want to change the width with every click. Once you click the first time, you width will be 20px so the condition won't be met again. You want instead to check if the width is of a certain value.
Notice that I am checking var widthValue because it
seems I cannot check the value of p.style.width
var widthValue = 10;
document.querySelector("button").addEventListener("click", function() {
var p = document.querySelector("p");
if(widthValue < 100) {
p.style.width = `${widthValue}px` ;
}
widthValue += 10;
});
p {
box-shadow: 0 4px 8px rgb(0,0,0,0.4);
height: 40px;
width: 10px;
display: block;
}
<button>click!</button>
<p>my paragraph</p>

This should create the desired effect that I think you were looking for. I got rid of the if statement and instead made it so whenever the button is clicked it increases the left margin by 1px. Changing the width wouldn't work because that changes the size of the paragraph block and not it's position.
let button = document.querySelector("button");
let width = 0;
button.onclick = function(){
width ++;
var p = document.querySelector("p");
p.style = `margin-left:${width}px;`;
};
p {
box-shadow: 0 4px 8px rgb(0,0,0,0.4);
height: 40px;
width: 10px;
display: block;
}
<button>click!</button>
<p>my paragraph</p>

Custom context menu always visible

I'm implementing a custom menu that appears when the user clicks the left mouse button and I'm having trouble trying to set the position (X, Y) of the menu so that the entire menu will be visible no matter which part of the page it opens.
The image below represents the problem:
The width of the menu increases depending on the text it has, so adjusting its position and height is also a challenge.
var elements = $('#content').find('h1, p, span');
var setMenuPosition = function(x, y) {
$("#menu").css('top', y);
$("#menu").css('left', x);
};
var setSelectedText = function() {
$('#menu').data('text', $(this).text());
};
var openMenu = function(e) {
e.stopPropagation();
elements.css('border', '1px solid transparent');
$(this).css('border', '1px dashed #333');
$('#menu').addClass('active');
$('#selected-text').text($('#menu').data('text'));
setMenuPosition(e.pageX, e.pageY);
};
var closeMenu = function() {
elements.css('border', '1px solid transparent');
$('#menu').removeClass('active');
};
$('#content').find('h1, p, span').on('mouseenter', setSelectedText);
$('#content').find('h1, p, span').on("click", openMenu);
$('#menu').on('mouseleave', closeMenu);
h1,
p,
span {
border: 1px solid transparent;
}
#content {
background-color: #e9e9ea;
padding: 25px;
}
#menu {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
background-color: #84ce6a;
color: #fff;
padding: 15px;
position: absolute;
min-width: 200px;
border-radius: 8px;
}
#menu.active {
visibility: visible;
opacity: 1;
}
#my-span {
background-color: rgb(255, 79, 79);
color: rgb(255, 255, 255);
padding: 0px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<h1>My Title</h1>
<p>My text</p>
<p>My another text</p>
<p>My text <span id="my-span">My span</span>, other part of the same text</p>
</div>
<div id="menu">
<h4>Selected text is: <span id="selected-text"></span></h4>
<button>
Ok
</button>
</div>
My fiddle: https://jsfiddle.net/robsonnogueira/295d78ak/

To prevent the Menu go outside the viewport you need this logic:
// 1. Set menu content
$menuContent.text(ev.currentTarget.textContent);
// 2. Get X, Y click coordinates
let X = ev.clientX;
let Y = ev.clientY;
// 3. Fix X, Y
X = Math.max(0, Math.min(X, $win.width() - $menu.outerWidth(true)) );
Y = Math.max(0, Math.min(Y, $win.height() - $menu.outerHeight(true)) );
// 4. Show menu
$menu.css({left:X, top:Y}).addClass('is-visible');
which takes in consideration the window (viewport) size and the Menu size (after its content is inserted) - and fixes, modifies the X, Y coordinates accordingly by using a combination of Math.max() and Math.min()
Here's an example:
jQuery($ => {
const $win = $(window);
const $menu = $('#menu');
const $menuContent = $('#menu-content');
const menuOpen = (ev) => {
ev.stopPropagation();
// 1. Set menu content
$menuContent.text(ev.currentTarget.textContent);
// 2. Get X, Y click coordinates
let X = ev.clientX;
let Y = ev.clientY;
// 3. Fix X, Y
X = Math.max(0, Math.min(X, $win.width() - $menu.outerWidth(true)) );
Y = Math.max(0, Math.min(Y, $win.height() - $menu.outerHeight(true)) );
// 4. Show menu
$menu.css({left:X, top:Y}).addClass('is-visible');
}
const menuClose = () => {
$menu.removeClass('is-visible');
}
// Events
$(".menu-open").on('click', menuOpen);
$(".menu-close").on('click', menuClose);
$(document).on('click', menuClose);
$menu.on('click', ev => ev.stopPropagation());
});
html, body {
height: 100%;
margin:0;
font: 14px/1.4 sans-serif;
}
#menu {
position: fixed;
max-width: 300px;
left: 0;
top: 0;
background: #84ce6a;
padding: 10px 20px;
visibility: hidden;
opacity: 0;
transition: visibility 0.24s, opacity 0.24s;
}
#menu.is-visible {
visibility: visible;
opacity: 1;
}
/*Demo only*/
.menu-open{
position: absolute;
}
.menu-open:nth-child(1) {top: 0; left: 0;}
.menu-open:nth-child(2) {top: 0; right: 0;}
.menu-open:nth-child(3) {bottom: 0; left: 0;}
.menu-open:nth-child(4) {bottom: 0; right: 0;}
<span class="menu-open">Click to open menu</span>
<span class="menu-open">Click me</span>
<span class="menu-open">Click here to open menu</span>
<span class="menu-open">Click to open menu</span>
<div id="menu">
<h3>This is my menu</h3>
<div id="menu-content"></div>
<button class="menu-close">CLOSE MENU</button>
</div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
The above can be additionally improved by:
Make the menu perform on the "right side" similarily as on the left side - by first calculating if a point-flip is achievable (anchor the element on the opposite right-top, right-bottom or left-bottom corners), or otherwise-stick to far edge as it does now.
Fixing the Menu width / height if does not fit in viewport (Some additional CSS for menu content/body scrollbars might be necessary)

Prevent Over Scrolling

After studying, looking at tutorials, getting some help here, I almost got this script working as intended. However, I'm not at a stand still and my brain hurts trying to figure out the logic.
The problem is the script allows for over scrolling forward. How can I stop that?
jQuery:
var $item = $('.slider'),
start = 0,
view = $('#main-header').width(),
end = $('.slider').width();
$('.next').click(function () {
if (start < view) {
start++;
$item.animate({
'left': '-=100%'
});
}
});
$('.prev').click(function () {
if (start > 0) {
start--;
$item.animate({
'left': '+=100%'
});
}
});
HTML:
<div id="main-header">
<div class="slider">
<div class="item-post" style="background: url(http://4.bp.blogspot.com/-LjJWOy7K-Q0/VOUJbMJr0_I/AAAAAAAAdAg/I2V70xea8YE/s320-c/enviroment-5.jpg) center"></div>
<div class="item-post" style="background: url(http://1.bp.blogspot.com/-l3UnbspFvv0/VOUK8M-34UI/AAAAAAAAdA0/ooGyXrHdNcg/s320-c/enviroment-2.jpg)"></div>
<div class="item-post" style="background: url(http://2.bp.blogspot.com/-cun1kQ42IBs/VOUaSPfnebI/AAAAAAAAdBQ/yTEj9K-BGdk/s320-c/fashion-3.jpg)"></div>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>
CSS:
#main-header {
overflow: hidden;
position: relative;
}
.slider {
width: 100%;
height: 200px;
position: relative;
}
.item-post {
width: 100%;
height: 200px;
background: rgba(0, 0, 0, 0.1);
background-size: cover !important;
background-position: center !important;
position: absolute;
top: 0;
}
.item-post:first-of-type {
left: 0;
}
.item-post:nth-of-type(2) {
left: 100%;
}
.item-post:last-of-type {
left: 200%;
}
.prev, .next {
position: absolute;
top: 0;
bottom: 0;
width: 25px;
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
jsfiddle: http://jsfiddle.net/51maaks8/8/

In order to determine whether there is another slide visible, you could create a function that adds the .offsetLeft value of the parent element to the .offsetLeft value of the last visible slide element and its width. You would then subtract the width of the parent element from the sum of these calculations.
In doing so, you are essentially calculating the position of the last slide element relative to the left positioning of the .item-wrapper parent element.
function moreVisibleSlides() {
var $last = $('#slider > .item-wrapper > .item-post:last:visible'),
positionRelativeToParent = $last.parent()[0].offsetLeft + $last[0].offsetLeft + $last.width() - $item.width();
return positionRelativeToParent > 5;
}
For the click event listener, only slide the element if there are more visible slides, which is determined by the boolean returned by the moreVisibleSlides function. In addition, I also added a check (!$item.is(':animated')) to prevent the next slide from being animated if there is currently an animation in progress. This ensures that you can't click the .next button multiple times during an animation and then over scroll regardless of whether or not there are more visible slides.
Updated Example
$('.next').click(function () {
if (moreVisibleSlides() && !$item.is(':animated')) {
start++;
$item.animate({
'left': '-=100%'
});
}
});

Need help changing z-index of an image

So, I am doing an assignment for my high school web design class, and I am having trouble getting the z-index of an image to change. There is supposed to be 2 images on top of each other. When you click the button on the page, the image on bottom will come to the top (or the top image will go to the bottom). Here is my code that I`m using:
The javascript
<script type="text/javascript">
function Switch()
{
document.getElementById("mononoke2").style.zIndex = "-1";
}
And here is the HTML
<div id="mononoke2">
<img src="mononoke2.png" alt="ashandsan">
</div>
<div id="mononoke3">
<img src="mononoke3.jpg" alt="sanandmoro" width="1234" height="694">
</div>
<button type="button" onclick="Switch()">Flippity Flip</button>
And the CSS
#mononoke2 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: absolute;
z-index: 100;
}
#mononoke3 {
margin-left: 0px auto;
margin-right: 0px auto;
display: block;
position: relative;
left: 50px;
z-index: 20;
}

use jQuery.
$("#id").css("zindex","-1");

Change your JS function to this:
function Switch() {
var element = document.getElementById("mononoke2");
var style = window.getComputedStyle(element);
var index = style.getPropertyValue("z-index");
if(index > 0)
{
document.getElementById("mononoke2").style.zIndex = "-30";
}
else
{
document.getElementById("mononoke2").style.zIndex = "100";
}
}

How to toggle (hide / show) sidebar div using jQuery

I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?

$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/

See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.

You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look

The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});

Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>

$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}

$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.

This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}