Develop Reference

Opening a div 'popup' from clicking a parent div

When clicking the 'test' div, it opens up the div price-list-test in a popup way like this:
However, I am stuck on trying to get the div to pop up on the 'right' alignment of the element rather than left, like this:
How can I achieve this?
$(document).ready(function() {
$(".test").each(function() {
$(this).click(function() {
var leftpos = $(this).offset() - window.screen.width;
$(this).children().css("left", leftpos.left);
$(this).children().css("display", "block");
});
})
});
.price-list-test {
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
.test {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
Open
<div class="price-list-test">
Test
</div>
</div>

Make 'test' class position relative, after that set 'price-list-test' left : 0%
.test {
postion: relative;
}
.price-list-test {
left: 0 %;
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}

HTML / Javascript - try to have page pointers as guidance

I am trying to get this small tutorial to show up the first few 5 seconds pointing to the menu bar on visiting the webpage. Anyone can tell me how I can do that with HTML CSS or Javascript?
I circled it with red of what I wanted on the image.
should I use an icon
how do I get it to point to specific point on the web page

One and easy solution is to create an overlay, which will cover the whole page. The purpose of the overlay will than catch the user click, and will destroy itself and also the tooltip.
To create the tooltip just specify the target element, for the tooltip should be created, the easiest way is to use css selector and jQuery.
With jQuery you can than find the target element on the page, get its position and size and according to that create the tooltip element as well.
Here is quick example (also as a fiddle https://jsfiddle.net/2c0q91np/):
$(function() {
// Find the target element on the page
var target = $(".menu li:nth-child(4n)");
var overlay = null;
var tooltip = null;
// Creates overlay which will handle the first click
function createOverlay() {
overlay = $("<div class='overlay'></div>").appendTo("body");
// When user clicks somewhere on the page the overlay will handle the click
overlay.one("click", destroyOverlay);
}
// Destroys the overlay and tooltip
function destroyOverlay() {
if(overlay) {
overlay.remove();
overlay = null;
}
if(tooltip) {
tooltip.remove();
tooltip = null;
}
}
// Creates tooltip for the target element
function createTooltip(text) {
// Get the position of the target
var pos = target.position();
// Get the height of the target
var height = target.outerHeight();
// Create the tooltip
tooltip = $("<div class='tooltip'></div>")
.html(text)
.appendTo("body")
.css({
"top": pos.top + height + "px",
"left": pos.left + "px"
});
}
createOverlay();
createTooltip("Click on one of the tabs to<br>quickly scroll through the page!");
// Desotroy tooltip automatically after 5 seconds
setTimeout(destroyOverlay, 5000);
});
body {
background: black;
font-family: Verdana;
font-size: 12px;
}
.menu {
border: 1px solid gray;
padding: 0;
margin: 0;
width: 100%;
display: flex;
}
.menu li {
list-style-type: none;
color: gray;
padding: 15px;
flex: 1;
text-align: center;
}
.menu li + li {
border-left: 1px solid gray;
}
.menu li a {
color: gray;
text-decoration: none;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(255,255,255,.0001);
z-index: 999;
}
.tooltip {
position: absolute;
z-index: 1000;
margin: 10px;
color: #fff;
width: 180px;
height: auto;
background: red;
padding: 10px;
}
.tooltip:before {
content:"";
position: absolute;
left: 25%;
transform: translate(-50%,-26px);
width: 0;
height: 0;
border-style: solid;
border-width: 0 13px 26px 13px;
border-color: transparent transparent red transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>
Home
</li>
<li>
Product
</li>
<li>
Shop
</li>
<li>
About the brand
</li>
<li>
Join us
</li>
<li>
Contact
</li>
</ul>

slide right to left div on hover jquery

Good day,
I'm having trouble with jquery. i found a topic here that i want to learn using jquery slide right to left div http://jsfiddle.net/PXLJG/2/.
what i want to achieve is when hover, show hidden content on specific div.
i tried adding .addClass('active'); to the script.
here is the script i made
$(document).ready(function(){
$('.holdingbox').hover(function(){
var rightbox = $('.rightbox');
if (rightbox.hasClass('active')){
rightbox.stop().animate({width: '-0px'}, 1000).removeClass('active');
} else {
rightbox.stop().animate({width: '90px'}, 1000).addClass('active');
}
});
});
The problem now is when i hover on one div, all div shows up.Please see attached image.
Hope you guys can point me to right direction. thank you

You need to target the rightbox element in current element context i.e. this
You can either use context or .find() to target child element.
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this); //$(this).find('.rightbox')
});
$(document).ready(function() {
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '-0px'
}, 1000).removeClass('active');
} else {
rightbox.stop().animate({
width: '90px'
}, 1000).addClass('active');
}
});
});
div {
display: inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: relative;
top: 0;
left: 0;
display: inline-block;
font-size: 24px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 30px;
vertical-align: top;
margin-right: 0;
}
.content {
width: 100px;
position: absolute;
background-color: #ac193d;
height: 29px;
left: 0;
top: 0;
right: 0;
color: #FFF;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holdingbox">
<span class="rightbox"><span class="content">Kenyér</span></span>
<span class="leftbox">></span>
</div>
<div class="holdingbox">
<span class="rightbox">
<span class="content">Kenyér</span>
</span>
<span class="leftbox">></span>
</div>

Change code to this
You'll get children of the hovered element this way. Without using $(this) you target all '.rightbox' elements in document.
$('.holdingbox').hover(function(){
$(this).find('.rightbox').stop().animate({width: '90px'}, 1000)
}, function(){
$(this).find('.rightbox').stop().animate({width: '-0'}, 1000)
});

How do I check whether the right/left edge of an element is overlapping the side of it's container?

I'm trying to display a right / left navigation arrow within a container (the arrows replace the existence of a scrollbar) when the corresponding edge of the content overlaps the container's sides.
Also, when the content is scrolled all the way to the end and can't scroll any further, the arrow should disappear.
My problem is, I'm confused as to how I write the function to check whether the element's contents are overlapping one edge or the other to hide one arrow or the other.
I started writing logic like this:
function setArrows(elem){
if (elem.scrollLeft() > 0) { //scroll position is greater than zero
// show left arrow
}
if () { //scroll position is less than zero
//show right arrow
}
}
but that doesn't seem to be the right logic. It sounded simpler in my head before I went to actually write the function.
How do I check whether the right/left edge of an element is overlapping the side of it's container?
Here's a Stack Snippet:
$('#wrapper').scroll(function(){
//check edges
});
div {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 500px;
height: 100px;
background-color: blue;
overflow-x: scroll;
overflow-y:hidden;
}
#content {
width: 1000px;
height: 100px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="wrapper">
<div id="content">
</div>
</div>

You need to check if the content width minus the scrollLeft is greater than the wrapper width. If it is show the right scroller..
Something like this
$(function() {
var content = $('#content'),
arrows = $('.arrow'),
wrapper = $('#wrapper').scroll(function() {
//check edges
// handle left arrow
if (this.scrollLeft > 0) {
arrows.filter('.left').addClass('visible');
} else {
arrows.filter('.left').removeClass('visible');
};
// handle right arrow
if (content.outerWidth() - this.scrollLeft > wrapper.width()) {
arrows.filter('.right').addClass('visible');
} else {
arrows.filter('.right').removeClass('visible');
};
});
arrows.on('click', function() {
if ($(this).is('.left')) {
wrapper[0].scrollLeft -= 100;
} else {
wrapper[0].scrollLeft += 100;
}
return false;
});
// initialize
wrapper.trigger('scroll');
});
div {
padding: 0px;
margin: 0px;
}
#wrapper {
width: 500px;
height: 100px;
background-color: blue;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
}
#content {
width: 1000px;
height: 100px;
background: url('http://lorempixel.com/1000/100/abstract/2') 0 0 no-repeat;
}
#full-container {
position: relative;
display: inline-block;
}
.arrow {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
background-color: black;
display: none;
z-index: 100;
cursor: pointer;
color: #fff;
text-align: center;
line-height: 100px;
}
.arrow.visible {
display: block;
}
.arrow.left {
left: 0
}
.arrow.right {
right: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="full-container">
<div class="arrow left"><</div>
<div id="wrapper">
<div id="content"></div>
</div>
<div class="arrow right">></div>
</div>

When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on

I prepared this:
http://jsfiddle.net/hXpWh/2/
When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on.
Here is the js code:
moped = "";
$(".container").mouseenter(function () {
$(".content").css('background', function () {
moped = $(this).css('background');
return "green";
});}).mouseleave(function () {
$(".content").css('background', function () {
return moped;
});
});
html:
<div class="container">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container</p>
</div>
</div>
<div class="container2">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container2</p>
</div>
</div>
css:
.container {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.container2 {
position: absolute;
top: 0;
left: 255px;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.content {
display: block;
background: red;
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption {
display: block;
background: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption p {
position: relative;
bottom: 10px;
left: 10px;
}

The other answers show what's wrong in the jQuery code, but another fix is to just using CSS for this.
Give the outer elements a common class, then:
.cont {
background:red;
}
.cont:hover .content {
background: green;
}
DEMO: http://jsfiddle.net/hXpWh/4/
But with respect to the jQuery code, not only do you need to find the nested .content, but also, there's no need for the variable. Just set the background to "" in the mouseleave.
$(".container").mouseenter(function () {
$(this).find(".content").css('background', "green");
}).mouseleave(function () {
$(this).find(".content").css('background', "");
});

Change $(".content") to $(this).find(".content") in the .mouseenter function, and it will only change the one that you hover over. You could change it to $(".content", this), but as per epascarello in the comments, it is not as efficient.

Well , you could either move the css background attribute or do this:
moped = "";
$(".container").mouseenter(function () {
$(this).children(".content").css('background', function () {
moped = $(this).css('background-color');
return "green";
});
}).mouseleave(function () {
$(this).children(".content").css('background', function () {
return moped;
});
});
My advice is do it with the script and refactor it , use .hover() and name the mouseenter and mouseout functions separately.
Good luck, mate.