I am quite new to JS and, although enjoying, am finding it difficult to get syntax correct.
I wanted to customise my alert boxes with my own version of them, and it seemed easy enough. I found a neat tutorial here and ran it successfully, did a bit of styling and found it wasn't very mobile friendly.
The main issue stems from two parts of the code, CSS here:
#dialogbox {
display: none;
position: fixed;
background: #0b6623;
border-radius: 7px;
width: 550px;
z-index: 2001;
}
Firstly, the dialogue box is set to 550px, which is fine on a large screen. The real issue occurs when you run the script which sets the position of the dialogue box:
function CustomAlert(){
this.render = function(dialog){
let winW = window.innerWidth;
let winH = window.innerHeight;
let dialogoverlay = document.getElementById('dialogoverlay');
let dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = '<strong>Share your score to Facebook</strong>';
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button class="btn btn-danger" onclick="Alert.ok()"><i class="far fa-times-circle"></i> Close</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
let Alert = new CustomAlert();
There are lines there that set the box directly into the centre of the screen.
My question is - I still want centre screen but I want the dialogue box to be fluid and shrink down to size on a mobile phone. Does anyone have suggestions on how to do this with that CSS?
The full script is available here: https://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial
Thanks kindly :)
Okay last attempt to help here.
The sample code below behaves exactly the same as the built in browser alert dialog boxes. It puts the box in the middle, auto sizes according to the content, and anything else on the page is NOT clickable or editable until the dialog box is closed. Well I wrote is a while back and I don't see any difference. It should work on any device so use it, change it, style it however you want. Note the "DO NOT CHANGE" comments. Changing that defeats the purpose. You do need the JQuery.js so download the the latest one here https://jquery.com/download/.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.main-container{
display: flex; /* DO NOT CHANGE */
height: 100vh; /* DO NOT CHANGE */
width: 100%; /* DO NOT CHANGE */
}
.c-message{
display: flex; /* DO NOT CHANGE */
position: fixed; /* DO NOT CHANGE */
top: 0px; /* DO NOT CHANGE */
left: 0px; /* DO NOT CHANGE */
width: 100%; /* DO NOT CHANGE */
height: 100%; /* DO NOT CHANGE */
}
.c-msgbox{
padding: 30px;
text-align: center;
margin: auto; /* DO NOT CHANGE */
background-color: #e4e4e4;
border-radius: 4px;
border: 1px solid #adadad;
-webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
}
.standerd-button2{
border: none;
font-family: arial,helvetica,clean,sans-serif;
font-size: 10px;
font-weight: 600;
color: white;
background: #1A709F;
padding: 3px;
text-align: center;
vertical-align: middle;
-webkit-border-radius: 3px;
width: max-content;
min-width: 50px;
margin: 2px;
}
.standerd-button2:hover{
background: crimson;
cursor: default;
}
</style>
<script type="text/javascript" src="JQuery.js"></script>
</head>
<body>
<div class="main-container">
<div>
<a id="ok" href="#">Normal Alert</a>
<br>
<a id="yn" href="#">Yes/No Alert</a>
</div>
<div>
<script type="text/javascript">
$.fn.CustomAlert = function (options, callback) {
var settings = $.extend({
message: null,
detail: null,
yesno: false,
okaytext: null,
yestext: null,
notext: null
}, options);
var frm = "";
detail = "<b>" + settings.detail + "</b>";
message = "<b>" + settings.message + "</b>";
if (settings.detail === null) {
detail = "";
};
frm = frm + message + "<div style='text-align: left; margin-top: 15px; margin-bottom: 15px;'>" + detail + "</div>";
if (settings.yesno === false) {
frm = frm + "<input id='ok' type='button' value='" + settings.okaytext + "' class='standerd-button2' />";
} else {
frm = frm + "<div><input id='yes' type='button' value='" + settings.yestext + "' name='yes' class='standerd-button2' />" +
"<input id='no' type='button' value='" + settings.notext + "' name='no' class='standerd-button2' /></div>";
};
var frmesg = "<div id='cmessage' name='cmessage' class='c-message'>" +
"<div class='c-msgbox'>" +
"<form>" + frm + "</form>" +
"</div>" +
"</div>";
$(".main-container").append(frmesg);
if (!settings.yesno) {
$("#cmessage #ok").click(function () {
$("#cmessage").remove();
callback(false);
});
} else {
$("#cmessage #yes").click(function () {
$("#cmessage").remove();
callback(true);
});
$("#cmessage #no").click(function () {
$("#cmessage").remove();
callback(false);
});
};
};
$("#yn").click(function(){
$().CustomAlert({message: "<div style='text-align: left;'><p><b>Confirmation Alert</b></p></div>",
yestext: "Yes",
notext: "No",
yesno: true},
function(success){
if (success) {
null;
// Do something
} else {
null;
// Do something else
};
});
});
$("#ok").click(function(){
$().CustomAlert({message: "<div style='text-align: left;'><p><b>Bla bla bla</b></p></div>",
okaytext: "Continue",
yesno: false},
function(success){
if (success) {
null;
// Do something
};
});
});
</script>
</body>
You can use Media Queries. Give your modal dialog a different style on mobile, tablet and desktop if needed. https://www.w3schools.com/css/css_rwd_mediaqueries.asp
#media only screen and (min-width: 480px) {
#dialogbox {
/* your mobile styles */
}
}
#media only screen and (min-width: 720px) {
#dialogbox {
/* your mobile styles */
}
}
#dialogbox {
/* your normal styles */
}
I stuck with this function in JS but removed one line and its variable:
let winW = window.innerWidth;
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
The CSS had some changes too:
#dialogbox {
display: none;
position: fixed;
margin-top: 17.5%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #0b6623;
border-radius: 7px;
width: 67.7%;
max-width: 550px;
z-index: 2001;
}
It's not perfect, granted, but it is 10s of 1000s of times better than before.
For those wondering why a z-index of 2001, because I am using bootstrap modals and they have a z-index of 1040 or so. And the z-index of 2000 is taken up by the white overlay (see code in OP).
This is what I suggest, if what I think you want is correct.
Copy this below and test it.
If it is not what you need, sorry, just tried to help.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main-container{
display: flex;
height: 100vh;
width: 100%;
}
.dialogbox{
display: flex;
margin: auto;
padding: 20px;
border-radius: 4px;
border: 1px solid #adadad;
-webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
-moz-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.60);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.40);
}
.dialogbox .dialogtext{
margin: auto;
}
</style>
</head>
<body>
<div class="main-container">
<div class="dialogbox">
<span class="dialogtext">
<h3>Some text</h3>
</span>
</div>
<div>
</body>
Note: this answer has become somewhat discursive, in terms of answering the question as set, the use of CSS vw/vh and media queries as recommended by other contributors will solve the immediate problem. I have left this answer here though as pondering the question raised additional issues of 'what are we trying to do with an alert function?'
The alert function in Javascript has some characteristics that you cannot emulate in your own Javascript, but you can get close.
The main thing about alert is that it is just that, the user is informed no matter what else is going on so it sits on top. It can get 'lost' in the middle of a wide window if the window is partially off the screen.
On most mobiles though it's a bit better because normally if your code is running the window will be at least partially visible on the screen.
For your immediate question, the best bet for making the alert box be visible, is to use the viewport dimensions plus fixed (as you have done)- the given code uses window dimensions and that just isn't going to work in all cases - the alert box could be way off the screen - for example if the window is representing a long scroll which the user is scrolling through.
Second you want the box to be visible above anything else that's in your window, so setting the z-index in CSS to something higher than you will ever use in the rest of your code is needed. (Does anyone know if all browsers would accept Number.MAX_SAFE_INTEGER - for ultimate safety though that would be quite extreme)
Third you need to fix the alert box in the viewport so the user can't scroll away from it - you want the user to respond so you know they have seen the message and can't completely ignore it.
Fourth is the question of blocking. A JS alert does this, but is it wise to have our own function do it and/or replace the native alert totally with our own function. Probably not, at some point you may want the real alert to work so might be best to leave it alone.
Replacing window.width with vw will make the box responsive - but it could be unreadable at small screens or not large enough on enormous ones. Fortunately CSS has media queries so you can use them with breakpoints at the most common sizes of screen to decide the width of your alert box (you need to let the height be scrollable as you don't know how much info is to be shown).
Note: the code below uses different naming from the original question to prevent confusion as the use of some of the elements is slightly different.
Moving the styling and especially the sizing decisions totally to CSS the JS can become something like:
function myAlert(alertMessage){
document.getElementById('alertinfo').innerHTML = alertMessage;
document.getElementById('alertoverlay').style.display = "block";
}
function myRemove(event) {
event.preventDefault();
event.stopPropagation();
document.getElementById('alertoverlay').style.display = 'none';
}
CSS
#alertoverlay {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999999;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
display: none;
}
#alertbox {
font-family: Arial, Helvetica, sans-serif;
width : 100vw;
height: auto;
overflow-y: auto;
position: fixed;
font-size: 10px;
background-color: white;
text-align: center;
}
#alertheader {
font-size: 3em;
}
#alertinfo {
margin-top: 20px;
}
#alertokbox {
width: 44px;
height: 44px !important;
float: right;
margin: 10px;
border-style: solid;
border-radius: 10%;
vertical-align: center;
}
#alertok {
margin-top: 14px;
}
#media only screen and (min-width: 550px) {
#alertbox {
width: 550px;
left: 50vw;
margin-left: -275px;
font-size: 16px;
}
}
#media only screen and (min-width: 1600px) {
#alertbox {
width: 30vw;
left: 50vw;
margin-left: -15vw;
font-size: 1vw;
}
}
HTML
<div id="alertoverlay">
<div id="alertbox">
<div id="alertheader">Alert</div>
<div id="alertinfo"></div>
<div id="alertokbox" onclick="myRemove(event);"></div>
<div id="alertok">OK</div>
</div>
</div>
You can have as many media 'breakpoints' as you like - for example if you are coding for a huge display screen right down to the smallest smart phone you will need to think about just how big you want your box to be.
For centering to work (the left and margin-left settings in the CSS) you will need to have the alert box in a div which is fixed with width the width of the screen - so left: 0; right: 0;
<!DOCTYPE html>
<html>
<head>
<style>
#alertoverlay {
position: fixed;
left: 0;
top:0;
bottom:0;
right:0;
z-index: 999999;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
display:none;
}
#alertbox {
font-family: Arial, Helvetica, sans-serif;
width : 100vw;
height: auto;
overflow-y: auto;
position: fixed;
font-size: 10px;
background-color:white;
text-align:center;
}
#alertheader {
font-size: 3em;
}
#alertinfo {
margin-top: 20px;
}
#alertokbox {
width:44px;
height: 44px !important;
float:right;
margin: 10px;
border-style: solid;
border-radius: 10%;
vertical-align:center;
}
#alertok {
margin-top:14px;
}
#media only screen and (min-width: 550px) {
#alertbox {
width: 550px;
left:50vw;
margin-left:-275px;
font-size: 16px;
}
}
#media only screen and (min-width: 1600px) {
#alertbox {
width: 30vw;
left: 50vw;
margin-left: -15vw;
font-size: 1vw;
}
}
#application {
width:2000px;
height:2000px;
background-color: white;
}
</style>
</head>
<body>
<div id="application">
<button onclick="myAlert('Read this important message then click OK');">Click me to show an alert</button>
</div>
<div id="alertoverlay">
<div id="alertbox">
<div id="alertheader">Alert</div>
<div id="alertinfo"></div>
<div id="alertokbox" onclick="myRemove(event);"><div id="alertok">OK</div></div>
</div>
</div>
<script>
function myAlert(alertMessage){
document.getElementById('alertinfo').innerHTML = alertMessage;
document.getElementById('alertoverlay').style.display = "block";
}
function myRemove(event) {
event.preventDefault();
event.stopPropagation();
document.getElementById('alertoverlay').style.display='none';
}
</script>
</body>
</html>
Okay. This part is the function
$.fn.CustomAlert = function (options, callback) {
var settings = $.extend({
message: null,
detail: null,
yesno: false,
okaytext: null,
yestext: null,
notext: null
}, options);
....
....
As you can see it takes a few parameters. 1) Is the message that will be centered. 2) Message detail(optional that will be aligned to the left. 3) yesno is either true or false. True for confirmation dialog or false for just an ok dialog. 4) okaytext is usually "Okay" or "Continue" if yesno is false. 5) yestext is usually "Yes" if yesno is true. 6) notext is usually "No if yesno is true.
All are optional but with a little logic you will figure out what to pass when.
The following is the click event and then the function call.
$("#yn").click(function(){
$().CustomAlert({message: "<div style='text-align: left;'><p><b>Confirmation Alert</b></p></div>",
yestext: "Yes",
notext: "No",
yesno: true},
function(success){
if (success) {
null;
// Do something
} else {
null;
// Do something else
};
});
});
$("#yn").click(function(){ // This is the event when that anchor with the id of "yn" is clicked. By the parameters you can also see that it is confirmation dialog.
Make sense?
I recommend spending a little time learning JQuery. It is not so difficult and very powerful. It saves you a lot of coding. Took me less then a day, and that just from w3schoole. Try not using the plugins and JQuery UI. Rather write your own plugins as I did. This code is all from my lib. It just helps to understand it better. Also I do not recommend using bootstrap, not that there is anything wrong with it, but doing your own CSS3 stylesheets empowers you to what you want. That is just my opinion.
Use vh and vw.
These are view width and height, relative to the browser window.
One unit equals 1% of the browser width or height.
Use vh and vw if you want to set specific width and heights.
But I would suggest having all your content in a main div with a css style "display: flex;" and your actual dialogue box(div) size not specified but just with a css property of "margin: auto;".
This will center it and automatically be sized according to your content in the box.
But then again, if you want to specify a size you can still then use vw and vh.
Up to you.
$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
}).animate({
top: "+=1000"
}, function() {
$(".raindropDelete").remove();
});
body {
background: rgb(0, 0, 0);
}
.shape {
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shape" onclick="curse()"></div>
<img src='http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width="15px" class="raindrop1">
I got this bit of code but I just can't seem to get it to work the way I want to. I want to make an image fall down to the bottom of the screen but to delete itself just before a scrollbar appears.
JS:
$(".raindrop1").clone().removeClass("raindrop1").addClass("raindropDelete").appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
}).animate({top :"+=1000"}, function() {
$(".raindropDelete").remove();
});
HTML:
<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and CSS:
body{
background: rgb(0, 0, 0);
}
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
Am I doing anything wrong?
JSFiddle
You are trying to remove your droplet in the function that is used to do something when animation is completed. So droplet animation is still going until it will reach +1000px from the top.
To remove before it falls below the window it's possible to use step option for animate method. What it does is looking what happens during animation and you can remove the droplet if when it falls below the edge.
Step Function
The second version of .animate() provides a step option — a callback
function that is fired at each step of the animation. This function is
useful for enabling custom animation types or altering the animation
as it is occurring. It accepts two arguments (now and fx), and this is
set to the DOM element being animated.
now: the numeric value of the property being animated at each step
fx: a reference to the jQuery.fx prototype object, which contains a number
of properties such as elem for the animated element, start and end for
the first and last value of the animated property, respectively, and
prop for the property being animated.
So what I've done is created a step function that each step looks if droplet is reached the edge of the window. If condition is met - just remove the droplet
$(".raindrop1").clone()
.removeClass("raindrop1")
.addClass("raindropDelete")
.appendTo("body").css({
left: $(".shape").position().left - 29.50,
top: $(".shape").position().top + 1,
position: "relative"
})
.animate({top :"+=100"},
{step: function(now) {
if (now+50 >= $(window).height())
$(".raindropDelete").remove();
}
},
function() {});
body{
background: rgb(0, 0, 0);
}
.shape{
border-radius: 50px;
width: 10px;
height: 10px;
background-color: white;
position: absolute;
left: 50%;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "shape" onclick = "curse()"></div>
<img src = 'http://images.clipartpanda.com/raindrop-clipart-RTGdn5bTL.png' width = "15px" class = "raindrop1">
using this css you can stick your image to the bottom of the window in all new browsers
.fix{
position:fixed;
bottom:0px;
left:50%;
}
<img src="yourimagepath" class="fix"/>
and for IE6 you can use
position:absolute; instead of fixed. It will position the image on the bottom of the page but as you scroll up the image will scroll with the page. Unfortunately position:fixed in not supported in IE6
Using this code you can detect if the user has reached to the bottom of the page. Here you can add your code for deleting the image. If you put the code here the image will be deleted automatic if the user reaches to the bottom of the page.
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// you're at the bottom of the page
}
};
You can use sticky elements. They are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.
[Ref: http://www.hongkiat.com/blog/useful-css-tricks-you-might-have-overlooked/]
Look at the following code for an example:
https://codepen.io/rpsthecoder/pen/zGYXEX
HTML:
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
</div>
<br />
<div class="extra"></div>
CSS:
#sticky {
position: sticky;
background: #F762BC;
width: 100px;
height: 100px;
top: 70px;
left: 10px;
display: flex;
justify-content:center;
align-items:center;
box-shadow: 0 0 6px #000;
text-shadow: 0 0 4px #fff
}
#wrapper {
width: 75%;
margin: auto;
height: 400px;
background-color: #ccc;
}
.extra{
background: #ccc;
width: 75%;
margin: auto;
height: 100px;
}
body {
height: 1000px;
font-family: georgia;
}
h4{
text-align: center;
}
I want to create a jQuery slime menu. The basic concept is simple. I have some icons with fixed positions on the screen. Some of them are "switches", and if you click them, you need to click on another element to have some effect (imageine something like when you have a building in an RTS. It's not enough to just click on the building's icon, but you need to place it on the map after that action).
I want to display a CSS triangle element after you clicked the icon, and before you click on another "compatible" div. The problem is not here, but I'm not so familiar with CSS transformations.
Here's a fiddle about what I have so far. My problem is that the arrow element is not rotating to the cursor. I also need to change the size of it, so the triangle's bottom center must be at the pointer.
http://jsfiddle.net/PSYKLON/41Lcj653/
The HTML part is simple (the span element is used for debugging):
<div class="fixicon"></div>
<div class="arrow"></div>
<span></span>
The CSS:
span {
float: right;
}
.fixicon {
width: 30px;
height: 30px;
background: #111;
border-radius: 15px;
position: fixed;
left: 10px;
top: 10px;
}
.arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 0 25px 200px 25px;
border-color: transparent transparent #111 transparent;
opacity: 0;
position: fixed;
left: 0;
top: 25px;
transform-origin: 25px 0px;
transform: rotate(0deg);
}
.arrow.show {
opacity: 1;
}
And the JS:
$(function(){
$('.fixicon').click(function(){
$('.arrow').toggleClass('show');
});
$(window).mousemove(function(e){
if(!$('.arrow').hasClass('show')) {
return;
}
var dir = point_direction(25,25,e.pageX,e.pageY);
$('.arrow').css('transform','rotate('+dir+'deg)');
$('span').text(dir);
});
});
function point_direction(x1,y1,x2,y2) {
var dx,dy;
dy = y2 - y1;
dx = x2 - x1;
return (Math.atan(dy/dx) * 360) % 360;
}
So basically, I need to achieve something like this, doesn't matter where the cursor on the screen are:
Thanks for anyone, who can help. :)
I'am serching solution in google. And saw some solutions to this but noone help me. When i asking in chrome about height(). It returns me true value, it's 1627. But when i write in script where it will be changed to this. It returns me 1290. And i don't know why. How can i return true height from document (because window can't help me). I'am trying with height(), innerHeight() and outerHeight().
Here is a screen with my problem: http://www.speedyshare.com/hTUDt/1.png
$(document).ready(function(){
var menu = $("#menu").height();
var content = $("body").outerHeight(true);
if(menu != content)
{
menu = content;
$("#menu").css({'height':menu+'px'});
}
});
or like this
$(document).ready(function () {
var menu = $('#menu');
$(window).resize(function () {
var height = $('#body').height();
menu.css({
'height': height + 'px',
});
}).trigger('resize');
});
It's doesn't work.
In css i have :
#menu {
width: 15%;
/*height: 100%;*/
background: #F5F5F5;
padding-top: 1%;
/* padding-bottom: 1%; */
font-size: 1.6rem;
font-family: 'Lato';
font-weight: 300;
color: #969696;
position: absolute;
border-right: 1px solid #c5c5c5;
box-shadow: 0px -1px 0px 1px #fff;
}
In firebug i see what's happend. He takes a height value 1290 (I don't know why) instead real height of body or 1626
$('element').css('height', 'auto !important')
Note: auto can be 100% or a fixed number (i.e '1626px')
I'm trying to build a javascript menu using prototype that when you mouseover an element, that element is hidden and a bigger element is shown in its place that closes onmouseout. This is what I have so far to give you an idea, but it doesn't work and is buggy. I'm not sure what the best general approach is:
EDIT: using the prototype refactor from remi bourgarel:
function socialMenuInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
EDIT: The main problem now is that the second bigger menu(social_menu) that is shown on top of the smaller mouseover triggering element(share_words) only closes when you mouseout the smaller trigger element even though this element is hidden.
EDIT: This is the html and css I am using:
<div id="share_words">share</div>
<div id="sociable_menu"></div>
#share_words{
display: none;
border: 1px solid white;
position: absolute;
right: 320px;
top:0px;
padding: 4px;
background-image: url('/images/icons/group.png');
background-repeat: no-repeat;
background-position:7px 6px;
text-indent:26px;
color: white;
z-index: 15;
}
#sociable_menu{
border: 1px solid black;
padding: 5px;
position: absolute;
right: 275px;
top: -10px;
z-index: 20;
}
Thanks for any help.
You're not using prorotype...try this
function socialLinkInit(){
var social_menu = $('sociable_menu');
social_menu.hide();
var share_words = $('share_words');
Event.observe(share_words,"mouseover",function(){
share_words.hide();
social_menu.show();
});
Event.observe(social_menu,"mouseout",function(){
social_menu.hide();
share_words.show();
});
}
But i'll need your html code to be more helpful