I have some social icons and I put a div that its visibility is hidden and I want to show it when every of the icons is hovered. I wrote the jQuery code below and works nicely, I have used console.log to see event.pageY and top property when is visible and they are same :
$(function() {
$('.social-icons a img').hover(function(event) {
var socialIconName = $(this).data('name');
var Y = event.clientY;
var DOMTarget = $('#social-icon-text');
DOMTarget.text(socialIconName);
DOMTarget.css({
'top': Y,
'visibility': 'visible'
});
}, function(event) {
$('#social-icon-text').css('visibility', 'hidden');
});
});
My HTML code :
<div class="social-icons">
<img src="Images/GitHub.png" alt="GitHub" data-name="GitHub">
<img src="Images/Instagram.png" alt="Instagram" data-name="Instagram">
<img src="Images/Telegram.png" alt="Telegram" data-name="Telegram">
<img src="Images/Twitter.png" alt="Twitter" data-name="Twitter">
<div id="social-icon-text">Instagram</div>
</div>
And this is my CSS :
#social-icon-text {
background-image: linear-gradient(120deg, #D4FC79 0%, #96E6A1 100%);
color: #555;
position: absolute;
font-size: 12px;
padding: 3px 10px;
border-radius: 3px;
top: 0;
left: 120%;
text-shadow: -1px 1px 5px rgba(0, 0, 0, .25);
visibility: hidden;
}
#social-icon-text::before {
content: "";
width: 0;
height: 0;
border-right: 5px solid #D4FC79;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
}
My problem image
My problem is when the div is appeared, although pageY and top property are the same but div has higher value that is showed underneath of the icon but I want them beside together.
Any response will be appreciated.
I used position method and its top property instead of changing pageX value.
Related
Hope you can help me!! So I have a div inside another div and I'd like to move the second one back and forth with a step of 14.5% left and right stopping it before the black edges. I've managed to do it setting the left property in px but I'd like to to that with percentages..how can I do that? Thanks in advance!
PS. of course now the code doesn't work well because of the px changing..for this reason I'd like to work with %s...
$(document).ready(function() {
$('#min_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left<99.495){
$('.highlighted').css('left',left);
}
else{
left= left - 103.108;
$('.highlighted').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
if(left>411.111){
$('#highlighted').css('left',left);
}
else{
left= left + 103.108;
$('#highlighted').css('left',left);
}
});
});
.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id=highlight class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>
First, your highlighted id is missing " and you're are trying to get your element by calling the id attribute with the class value.
You can get the container width with .width() function, and then calculate the percentage by multiplying it by 0.145.
$(document).ready(function() {
$('#min_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left < step){
$('#highlight').css('left',left);
}
else{
left= left - step;
$('#highlight').css('left',left);
}
});
});
$(document).ready(function() {
$('#plus_oct').click(function() {
var containerWidth = $(".mini_keyboard").width();
var left = parseFloat($('.highlighted').css('left'));
console.log(left);
var step = (containerWidth * 0.145);
if(left > (containerWidth - (2*step))){
$('#highlight').css('left',left);
}
else{
left = left + step;
$('#highlight').css('left',left);
}
});
});
.mini_keyboard{
position: relative;
width: 700px;;
height: 90px;
top: 22.5%;
transform: translate(35%);
border: 0.5rem solid;
box-shadow:
inset 0 0 18rem black,
inset 0 0 4rem black,
0 0 10rem black;
padding: 0.5%;
bottom: 5px;
}
.highlighted{
position: absolute;
background-color: yellow;
width: 198px;;
height: 93px;
left: 57.5%;
top: 0.5%;
opacity: 0.6;
padding: 0.5%;
bottom: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mini_keyboard">
<div id="highlight" class="highlighted"></div>
</div>
<button id="min_oct">-1 octave</button>
<button id="plus_oct">+1 octave</button>
I'm trying to attach some kind of tips above buttons and show them on hover so they will appear directly aside to mouse pointer. I want to store text for those tips in data-attributes of buttons and create them dynamically using jquery. I use .pageX .pageY stuff to find coordinates of cursor, but it's working fine only in certain point of scroll.
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.pageY-230,
left: e.pageX+15
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.pageY-230,
left: e.pageX+15
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>
You better watch it: http://jsfiddle.net/millerJr/ps8vf8ce/
So, how to attach those tips to pointer directly, regardless to scroll position? Thanks!
You need to use e.clientX and e.clientY in this manner
top: e.clientY+$(this).height() and left: e.clientX+$(this).width()/2 for bottom center of this element in scope. You can add anything else wrt the current element hovered upon
e.clientX and e.clientY will provide the exact mouse co-ordinates
Snippet Below
$('button').mouseenter(function (e) {
var data = $(this).data('value');
if(data){
$('<div />', {
'class' : 'tip',
text : $(this).data('value'),
css : {
position: 'fixed',
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
}
}).appendTo(this);
}
})
.mouseleave(function () {
$('.tip', this).remove();
})
.mousemove(function (e) {
$('.tip', this).css({
top: e.clientY+$(this).height(),
left: e.clientX+$(this).width()/2
});
})
button {
margin: 10px;
}
.divs {
width: 100%;
height: 350px;
background-color: #ddd;
margin: 0px;
}
.tip {
border: 1px solid #eee;
background: #fff;
box-shadow: 3px 4px 6px rgba(0,0,0,0.4);
padding: 3px;
font-weight: bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divs"></div>
<button data-value="Per">First</button>
<button data-value="Aspera">Second</button>
<button data-value="Ad">Third</button><br>
<button data-value="Astra">Yadi</button>
<button data-value="To infinity">Yada</button>
<button data-value="and beyond!">Bla-bla</button>
<div class="divs"></div>
I want to hide black arrow while clicking green arrow.. without using jquery
My fiddle:
http://jsfiddle.net/t5Nf8/195/
html:
<div class="arrow-down"></div>
<div class="arrow-up"></div>
css:
.arrow-down {
position: absolute;
/*display: none;*/
left: 1.5px;
top: 6px;
z-index: 1;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
.arrow-up {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
position: absolute;
left: 1.5px;
top: 14px;
z-index: 1;
height: 0px;
width: 0px;
}
js:
$('.arrow-up').click(function {
$('.arrow-down').hide();
});
Please anyone help
$('.arrow-down').click(function(){
$('.arrow-up').toggle();
});
$('.arrow-up').click(function(){
$('.arrow-down').toggle();
});
You had a syntax error in your Code after function you should have
() which you missed in your Code
I Have used toggle so that it shows and hides but you can use hide alone if you want.
DEMO
According to #JoeFitter's answer, you can toggle the "upArrow" to show and hide by clicking the "downArrow" using JavaScript
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
if(upArrow.style.display == 'none'){
upArrow.style.display = 'block';
}
else{
upArrow.style.display = 'none';
}
});
Live Demo
var downArrow = document.getElementsByClassName('arrow-down')[0];
var upArrow = document.getElementsByClassName('arrow-up')[0];
downArrow.addEventListener('click', function() {
upArrow.style.display = upArrow.style.display !== 'none' ? 'none' : 'block';
});
http://jsfiddle.net/t5Nf8/197/
Use getComputedStyle(el).getPropertyValue("display"); to get the value of dispaly, after, you just do a test to show or hide your arrow!
Note: it's a pure Javascript, no library:
var display = getComputedStyle(up).getPropertyValue("display");
if ( display !== "block" ) {
up.style.display = 'block';
} else {
up.style.display = 'none';
}
Want to watch it in action? See demo: http://jsfiddle.net/g4g9doj0/
I don't think it is a simple task JUST using CSS, using Jquery should look like:
I don't know but I see useless CSS instructions, I think it could be reduce to:
.arrow-down {
border-color: transparent transparent black;
border-style: dashed dashed solid;
border-width: 0px 8.5px 8.5px;
height: 0px;
width: 0px;
}
.arrow-up{
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
}
Jquery would look like:
$(document).ready(function(){
$(".arrow-up").click(function(){
$(".arrow-down").hide();
});
});
http://jsfiddle.net/t5Nf8/209/
Update
I found the actual issue.
In my code I am referencing the height of the overlay,
In all browsers except IE7 this is the same as the window size, however in IE7 this is the document size.
So I changed it to reference the window size and it works :).
So my question now is, Why does IE7 do this, and am I correct is assuming IE7 is the foul ball here?
Original
I am creating a modal dialog script (for my own use).
The code works perfectly in.
Google chrome,
Firefox,
IE8+
However in IE7 The positioning is all wrong.
Example
These are the positioning values I get in IE9 vs IE7 (keep in mind that the values are smaller than a normal window as i have the dev tools open.)
IE7
left: 367px;
top: 1409px;
IE9
left: 369.5px;
top: 122.5px;
What do I need to do to fix this?
The CSS
Note that this css has some strange rules such as the body tag for testing purposes only.
Note that I am aware that rgba, box-shadow etc does not work in css3 supportless browsers,
I will fix this when the dialog functions properly.
body {
padding: 0;
margin: 0;
color: #fff;
height: 3000px;
}
#modal-overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: none;
}
#modal-dialog {
display: none;
background: #000;
border-bottom: 1px solid #141414;
border-right: 1px solid #141414;
border-top: 1px solid #121212;
border-left: 1px solid #121212;
position: absolute;
z-index: 99999;
-webkit-box-shadow: 3px 3px 10px #000000;
-moz-box-shadow: 3px 3px 10px #000000;
box-shadow: 3px 3px 10px #000000;
}
#modal-element{
margin-top: 16px;
overflow-x: hidden;
overflow-y: auto;
}
#test, #test2 {
display: none;
width: 800px;
padding: 5px;
}
#test2 {
width: 600px;
}
#modal-close {
position: absolute;
background-image: url('close.png');
width: 16px;
height: 16px;
top: -5px;
right: -5px;
cursor: pointer;
}
#modal-title {
position: absolute;
top: -10px;
left: 5px;
color: #fff;
font-size: 16px;
font-weight: bold;
}
#modal-close:hover {
-webkit-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
-moz-box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
box-shadow: inset -1px -1px 10px rgba(0,0,0,0.8);
}
#modal-close:active {
-webkit-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
-moz-box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
box-shadow: inset -5px -5px 10px rgba(0,0,0,0.8);
}
The Javascript
(function($) {
$.widget("hailwood.modal", {
options: {
width: null,
height: null,
title: '',
closeOnEscape: true,
modal: true
},
self: {},
_create: function() {
//setup our elements
var self = this;
this.body = $('body');
this.content = self.element;
this.place = $('<div id="modal-place" style="display:none;"></div>');
this.dialog = $('<div id="modal-dialog"><div id="modal-element"></div></div>');
this.stuff = $('#modal-element', this.dialog);
this.overlay = $('<div id="modal-overlay"></div>');
this.title = $('<div id="modal-title">' + this.options.title + '</div>');
this.closeButton = $('<div id="modal-close"></div>');
//shove the placeholder element in
this.content.after(this.place);
//capture width and height
this.orig_width = (this.options.width === null ? this.content.outerWidth(true) : this.options.width);
this.orig_height = (this.options.height === null ? this.content.outerHeight(true) : this.options.height);
//insert elements into the dom
this.body.prepend(
this.overlay.prepend(
this.dialog.prepend(
this.stuff.prepend(this.content)
)
.prepend(this.closeButton)
.prepend(this.title)));
//make the content visible
this.content.show();
this.refresh(this);
//show the overlay and dialog
this.overlay.fadeIn('medium', function(){
self.dialog.show('slide', {direction: 'down'}, 'medium');
});
//setup the resize handler
$(window).resize(function() {
self.refresh();
});
this.closeButton.click(function() {
self.close();
});
if (this.options.closeOnEscape)
$(document).bind('keyup.hailwood.modal', function(e){
if (e.keyCode == 27)
self.close();
});
//setup close handler
this.self = this;
},
close: function() {
this.destroy();
},
refresh: function() {
var self = this;
if (self.overlay.length == 0 || self.dialog.length == 0)
return false;
self.height = self.orig_height;
self.width = self.orig_width;
//make an adjustment to the height if it is bigger than the overlay
var s1 = self.height;
self.height = (self.height > self.overlay.height() ? self.overlay.height() - 20 : self.height);
var diff = (s1 === self.height ? 0 : 16);
//set the dialog height and width
self.dialog.height(self.height);
self.dialog.width(self.width);
self.stuff.height(self.height -diff);
self.stuff.width(self.width);
//position the dialog
self.left = (self.overlay.width() / 2) - (self.dialog.outerWidth() / 2);
self.top = (self.overlay.height() / 2) - (self.dialog.outerHeight() / 2);
self.dialog.css({left : self.left, top : self.top});
},
destroy: function() {
var self = this;
self.dialog.hide('slide', {direction: 'down'} ,'medium', function() {
self.place.after(self.content.hide());
self.place.remove();
self.dialog.remove();
$(window).unbind('.hailwood.modal');
$(document).unbind('hailwood.modal');
self.overlay.fadeOut('medium', function() {
self.overlay.remove();
});
});
$.Widget.prototype.destroy.call(this);
}
});
/*
* Remember what I said in the first comment?
* we pass in jQuery here so it gets aliased as $
*/
})(jQuery);
Try removing this line:
body {
height: 3000px;
}
Didn't affect FF when I tested, and I really don't see a use for it anyways.
It's always best to remove unnecessary code when you're trying to get CSS stuff to work so you can nail down the source of the problem, unless you think that box-shadow might be related to your positioning problem.
I am trying to slide a a panel from the right of the button to the left. Here is my css:
style.css:
.pToolContainer {
position : absolute;
right: 0;
}
.btn-pTool{
//display:block;
position:absolute;
right: 0;
margin:0;
padding:0;
background-image: url(slide_button.png);
background-repeat:no-repeat;
}
.btn-pToolName{
text-align: center;
width: 26px;
height: 190px;
display: block;
color: #fff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
line-height: 32px;
}
.pToolSlidePanel{
min-height: 185px;
min-width: 185px; /*WIDTH OF HIDDEN SLIDE PANEL*/
display: none; /*THE ELEMENT WILL NOT BE DISPLAYED*/
border-right-width: 2px; /*ADDS RIGHT BORDER OF 2PX*/
border-left-width: 2px; /*ADDS LEFT BORDER OF 2PK*/
border-right-style: solid; /*MAKES RIGHT BORDER SOLID*/
border-left-style: solid; /*MAKES LEFT BORDER SOLID*/
border-right-color: #626262; /*RIGHT BORDER COLOR*/
border-left-color: #626262; /*LEFT BORDER COLOR*/
background-color: #949494; /*SLIDE PANEL BACKGROUND COLOR*/
border-bottom-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
border-bottom-style: solid; /*MAKES BOTTOM BORDER SOLID*/
border-bottom-color: #626262;
border-top-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
border-top-style: solid; /*MAKES BOTTOM BORDER SOLID*/
border-top-color: #626262; /*BOTTOM BORDER COLOR*/
opacity: .8; /*SETS SLIDE PANEL BACKGROUND'S OPACITY TO 80%*/
margin: auto; /*CENTERS OUR SLIDE PANEL*/
position: fixed;
//bottom: 50px;
overflow:hidden;
}
test.html:
<div class="pToolContainer">
<span class="btn-pTool">
<a class="btn-pToolName" href="#"></a>
</span>
<div class="pToolSlidePanel"></div>
</div>
I have tried the following jquery statement but it doesn't seem to work:
$(pToolSlidePanel).animate({width:'toggle'},2000);
where pToolSlidePanel is the HTMLElement created in my javascript file using:
var pToolSlidePanel = document.createElement("div");
I have also tried the following tutorial http://www.learningjquery.com/2009/02/slide-elements-in-different-directions but I keep getting an error stating that HTMLElement does not have a css method
DEMO: http://so.devilmaycode.it/sliding-from-right-to-left/
$(function() {
var iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = parseInt(liW * $slider.find('li').length);
$slider.css('width', liFW + 'px');
$('.button a').click(function() {
var left = (this.id == 'right') ? parseInt($slider.css('left').toString().replace('-', '')) : parseInt($slider.css('left'));
var side = (this.id == 'right') ? (((left + (liW * iXS)) == liFW) ? 0 : -(left + liW)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - liW) : 0);
rotate(side);
return false;
});
var rotate = function(leftY) {
$slider.stop(true, true).animate({
left : leftY
}, 500);
}
});
for full code look at the source code of demo example.
Try this
$(".pToolSlidePanel").animate({width:'toggle'},2000);
For Class pToolSlidePanel use $(".pToolSlidePanel")
and For eg: id pToolSlidePanel use $("#pToolSlidePanel")
Edit: Try this configuration here http://jsfiddle.net/TQZh5/50/
I removed some of the CSS to make it easier, but it should be trivial to add it back in.
$(pToolSlidePanel).animate({width:'toggle'},2000);
Should be
$('.pToolSlidePanel').animate({width:'toggle'},2000);
Also, what are you binding the animate action to? Is the jQuery wrapped in the ready() function so it knows the DOM is completely loaded?
Want to slide a element from position A(right) to B(left)?
HTML:
<div class="pToolContainer">
<div class="pToolSlidePanel">
</div>
</div>
CSS:
.pToolContainer {
width:400px;
height:100px;
background-color:#ccc;
position:relative;
}
.pToolSlidePanel
{
position:absolute;
right:0;
top:0;
width:100px;
height:100px;
background-color:#ffcc33;
}
Javascript (jQuery):
$('.pToolSlidePanel').animate({
left: '-=200'
}, 2000);