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;
}
Related
In my div is the overlay of another absolutely positioned div. However the text is still going beyond the div.
var mainDiv = ".myclass";
var mainDivP = ".myclass p";
$(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });
function multiLine_ellipsis(mainDiv, mainDivP) {
$(mainDivP).each(function(index) {
var divh = $(mainDiv).height();
if ($(this).outerHeight() > divh) {
var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
console.log(returnText);
$(this).text(returnText);
}
});
}
.myclass {
color: #FFFFFF;
font-family: "my-font";
font-size: 28px;
padding: 15px;
height: 100px;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
.myOverlay {
background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
position: absolute;
width: 100%;
z-index: 1;
bottom: 0;
height: 100%;
}
.outerDiv{
width:231px;
height:173px;
position:relative;
}
p{margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
<div class="myOverlay">
<div class="myclass">
<p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
</div>
</div>
</div>
I should get ... at the end of the statement but i am not getting it.
Your CSS hides the rest, just change font-size to 30px you will see some part of the hidden part.
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)
});
I have a fixed header and menu bar and there is a container div when i scroll down the container div does not hide itself below the menu bar as shown in image below is the jquery code i am using. Please help to solve my issue.
var header= $('.header');
var start_div = $(header).offset().top;
var menu_div = $('.menu');
var menu = $(menu_div ).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(header).css('position',((p)>start_div ) ? 'fixed' : 'static');
$(header).css('top',((p)>start_div ) ? '0px' : '');
$(header).css('width','840px');
$(header).css('min-height','108px');
});
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop()+100;
$(menu_div).css('position',((p)>menu) ? 'fixed' : 'static');
$(menu_div).css('top',((p)>menu) ? '110px' : '');
$(menu_div).css('width','575px');
$(menu_div).css('height','57px');
});
Unless I'm missing something you don't need jQuery or even JS to do that.
Check the snippet (codePen here)
html,
body {
width: 100%;
height: 100%;
background-color: white;
}
.header-wrapper {
top: 0;
right: 0;
left: 0;
position: fixed;
height: 160px;
background-color: white;
}
.header {
background-color: cyan;
height: 100px;
width: 100%;
}
.menu {
width: 100%;
height: 50px;
background-color: green;
margin-top: 10px;
}
.content {
color: #fff;
background-color: black;
margin-top: 170px; /* same as height of header + nav + margins + 10px for coolness*/
}
<body>
<div class="header-wrapper">
<div class="header">Blue Header</div>
<div class="menu">Green Menu</div>
</div>
<div class="content">
My content<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
Use the css z-index property.
.header, .menu {
z-index: 2
}
.container {
z-index: 1
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp
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>
Well, i'm starting to write this webpage and i've run into a few problems that i just cannot quite find the answers to.
The basic idea of the code I have is:
Open menu when the mouse is on "explore webpage"
Menu "links" highlight on mouseover
When user clicks on menu item, the menu moves to the top of the page and the "link" stays highlighted until the user clicks a different link.
When the menu moves to the top, a div opens below, displaying the content for that section.
I am having two main problems. Firstly, whenever I click on the menu item, it does not stay highlighted (number 3). Secondly, the div is not opening below the menu after the click(number 4). I would greatly appreciate any insight into these issues.
I am including all of my code, as I believe it is all relevant to my problems.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color: #000000;
}
#container
{
z-index: -1;
background: #000000;
width: 900px;
height: 900px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -450px;
}
#explore
{
z-index: 1;
background: #000000;
width: 300px;
height: 150px;
position: absolute;
top: 41.666%;
left: 33.333%;
opacity: 1;
}
#explore-text
{
z-index: 1;
color: #eb56bd;
font-size: 50px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
position: absolute;
top: 5px;
left: 0%;
opacity: 1;
}
.title
{
z-index: 2;
width: 300px;
height: 150px;
text-align: center;
font-size: 60px;
font-family: sans-serif;
font-weight: bold;
color: #000000;
display: none;
}
#news
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 33.333%;
}
#about
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 0%;
}
#events
{
background: #eb56bd;
position: absolute;
top: 41.666%;
left: 66.666%;
}
.content
{
z-index: 0;
background: #b0408d;
width: 900px;
position: absolute;
top: 21.666%;
left: 0px;
height : 900;
}
#news-content
{
display: none;
}
#about-content
{
display: none;
}
#events-content
{
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="explore" onmouseover="overExplore()" onmouseout="outExplore()">
<div id="explore-text">Explore Webpage</div>
</div>
<div id="news" class="title" onmouseover="overTitle(news)" onmouseout="outTitle(news)" onclick="titleClick(news)">news</div>
<div id="about" class="title" onmouseover="overTitle(about)" onmouseout="outTitle(about)" onclick="titleClick(about)">about</div>
<div id="events" class="title" onmouseover="overTitle(events)" onmouseout="outTitle(events)" onclick="titleClick(events)">events</div>
<div id="news-content" class="content">
</div>
<div id="about-content" class="content">
</div>
<div id="events-content" class="content">
</div>
</div>
<script>
var titleClicked = false;
var isClicked;
var newsContent = document.getElementById('news-content');
var aboutContent = document.getElementById('about-content');
var eventsContent = document.getElementById('events-content');
var title = document.getElementsByTagName('title');
var news = document.getElementById('news');
var about = document.getElementById('about');
var events = document.getElementById('events');
var explore = document.getElementById('explore');
var exploreText = document.getElementById('explore-text');
function overExplore() {
explore.style.width="900px";
explore.style.left="0%";
explore.style.background="#eb56bd";
explore.style.cursor="pointer";
explore.style.cursor="hand";
explore.style.opacity="0";
news.style.display="block";
about.style.display="block";
events.style.display="block";
}
function outExplore() {
explore.style.width="300px";
explore.style.left="33.333%";
explore.style.background="#000000";
exploreText.style.left="0%";
exploreText.style.top="5px";
explore.style.opacity="1";
news.style.display="none";
about.style.display="none";
events.style.display="none";
}
function overTitle(div) {
if (div!= isClicked) {
div.style.background="#b0408d";
}
if (titleClicked == false) {
div.style.display="block";
news.style.display="block";
about.style.display="block";
events.style.display="block";
}
explore.style.cursor="pointer";
explore.style.cursor="hand";
}
function outTitle(div) {
if (div!= isClicked) {
div.style.background="#eb56bd";
}
if (titleClicked == false) {
div.style.display="none";
news.style.display="none";
about.style.display="none";
events.style.display="none";
}
}
function titleClick(div) {
div.style.background="#b0408d";
var isClicked = div;
if (div == news)
{
about.style.background="#eb56bd";
events.style.background="#eb56bd";
newsContent.style.display="block";
aboutContent.style.display="none";
eventsContent.style.display="none";
}
else if (div == about)
{
news.style.background="#eb56bd";
events.style.background="#eb56bd";
newsContent.style.display="none";
aboutContent.style.display="block";
eventsContent.style.display="none";
}
else
{
news.style.background="#eb56bd";
about.style.background="#eb56bd";
newsContent.style.display="none";
aboutContent.style.display="none";
eventsContent.style.display="block";
}
explore.style.top="5%";
news.style.top="5%";
about.style.top="5%";
events.style.top="5%";
titleClicked=true;
}
</script>
</body>
</html>
Thanks so much for your help.
A secondary issue: how do I prevent the cursor from changing from the pointer when directed at the text in my menu?
Thank again!
I've never managed to get the pseudo-classes (like :hover) to behave the way you want. If you can use jQuery, you can add a click function to the menu class:
$('.title').click(function() {
$('.title').css({'background':'#eb56bd'});
$(this).css({'background':'#b0408d'});
});
First you set all backgrounds to the non-clicked color, then apply the highlight color to the clicked item. This ensure a previously clicked item has the highlight removed when you click on another item.
JSFiddle
You should use css classes to style your menu links:
.selected{background:rgb(176, 64, 141);}
When a menu link is clicked, then you apply the selected class to the that menu link
function titleClick(div) {
//div.style.background="#b0408d";
div.className='selected';
var isClicked = div;
Following that you'll need to clear the 'selected' class from the other menu links so that they are no longer selected, example:
about.className="";
events.className="";
Instead of using mouseover and mouse out to style your menu links, use css :hover instead:
#news:hover{
background:"#eb56bd";
}
As for the div not showing, I'm guessing it's because the divs are empty. I've filled it up with some random text and it does show.