|
CSS - Css / Javascript Blanket Popup
Similar TutorialsSee here the live version: jsfiddle.net/nrWug i want that the menu in the popup is binded ondrag or onresize to the outer popup. How can i bind these two to make the dialog draggable and resizable? thanks for your time. I'm using Eric Meyer's Pure CSS Popups template for a new site. I want to have a graphic pop up in the middle of the page for one particular link when clicked, rather than have the browser load a new page, but I don't know how to go about it. Can anybody shed some light on how to alter the stylesheet to have this one link act differently from the rest? Thanks. Hi everyone, I am wondering why IE sucks so bad... Just kidding. Actually, my CSS popup appears in Mozilla Firefox (best browser on earth ) but not in IE. The guy that I learned it from (http://www.meyerweb.com/eric/css/edge/popups/demo.html) works in both IE and Mozilla, and I dont understand why mine doesn't any help would be appreciated Mine: Code:
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 160px; left: -10px; width: 125px;
padding: 0px; margin: 0px; z-index: 100;
color: #000; background: #fff;
font: 10px Verdana, sans-serif; text-align: left; }
div#links {position: absolute; top: 96px; left: 27px; width: 58px; height: 20px; font: 10px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; font: 10px Verdana, sans-serif;
padding: 0px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #fff; }
His: Code:
div#links {position: absolute; top: 81px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 5px 10px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #FFC; background: #444;
border-right: 5px solid #505050;}
div#links a:hover {color: #411; background: #AAA;
border-right: 5px double white;}
div#links a span {display: none;}
div#links a:hover span {display: block;
position: absolute; top: 180px; left: 0; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: #AAA; background: black;
font: 10px Verdana, sans-serif; text-align: center;}
I'll admit right off - I don't know much about CSS. I have a page that displays the event logs on my servers. If I display the whole message of each event it will take up way too much space. I'd like to have it so that if you move your mouse over the message like of the event, a "window" pops up (without navigating away from the page they are on) with the whole message. I know my viewers are going to be using IE 6.1. I've looked through here and on google for it, and I think I'm just looking in the wrong place. Thanks. Hi guys, i really don't know if this can be accomplished with CSS but here it goes: I want a user that's filling a form on my web application to be able to click on a certain field(or a link near that field) and pop out another form, fill it, submit it and then continue to fill the original form. Maybe there's a bit of Javascript there or a combination of technologies, i really don't know so forgive me if i'm in the wrong forum, but i've seen similar stuff done with CSS, so if any of you has any idea on how i can accomplish this i'd appreciate it very much. I've attached a graphic to illustrate it better. Thanks! I have the following page: http://take2records.com/test/dbtest.php Which you can test using http://take2records.com/test/dbtest...4&id_num=404100 What I need is to be able to have a popup any time you hover over a particular row in the generated table. I found this code to do the hover: Code: class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a> <br /> <br /> <a class="thumbnail" href="#thumb">Dynamic Drive<span><img src="media/dynamicdrive.gif" /><br />Dynamic Drive</span></a><br /> But I don't see how to apply this when the user hovers over a particular row. http://siliconsatan.com/test.php The above test example is for a DIV that will show / hide with a click on a button / link. Problem: Scroll down a bit, click on one of the links. The whole page will scroll to the top. It has something to do with the <a> tag. I could get rid of the <a> tag, but then I would have to use JS to both do the roll-over, and trap the "click" event? I'm actually using JS to trap the "click" event anyway, but I was hoping for a fully CSS roll-over function. (The content - <li> ... </li> - is dynamically populated, or in the final it will be) What am I doing wrong? Hi I'm building a selectbox insead of using the common select tag. I use the windows.createpopup() method to display the list of choise. Differently to the div object the popup object is like a new window so it doesn't inherit the css style sheet I've attached to the main window. I tought to attach it by using the addImport(url) method of the styleSheet object but it doesn't seem to work. Here it's my code, the show function it's called when the selectbox expands: var Select_box = window.createPopup(); Select_box.document.styleSheets[0].addImport("URL('common/css/default_style.css');") function show(element) { if (Select_box.isOpen==false) { Select_box.document.body.innerHTML = Select_box_content.innerHTML; Select_box.document.body.className='selectbox'; Select_box.show(0, 18, 150, 50, element); } else { Select_box.hide(); } } I've noticed that using the addImport method on the main window, and not on the instance of the select_box, with 0 index of the styleSheet the error doesn't occur but it doesn't also change the proprety. Tring using any other index value it gives me the usual error. So how can I attach a style sheet to a popup created with the window.createpopup()? Thank you Hi to all How to show popup on hover the link through css like <a here="">Hover here</a> show a popup on left side of the link thanks in advance Hi, At work I have to do popup menus (I hate them), so I am trying with all I have to not use Javascript. I have the following working using just CSS and HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Pure CSS Popups</title>
<style type="text/css">
body
{
font-family: Arial;
}
div#menubar
{
background-color: steelblue;
font-weight: bold;
}
div#menubar a.menuhead
{
position: relative;
text-decoration: none;
margin-right: 18pt;
color: darkblue;
}
div#menubar a.menuhead:hover
{
color: white;
background-color: darkblue;
}
div#menubar a.menuhead div.menu
{
visibility: hidden;
position: absolute;
left: 0;
top: 1em;
width: 15em;
background-color: steelblue;
border: 2px solid darkblue;
}
div#menubar a.menuhead:hover div.menu
{
visibility: visible;
}
div#menubar a.menuhead div.menu div.menuitem
{
width: 100%;
cursor: pointer;
background-color: steelblue;
border-bottom: 1px solid darkblue;
}
div#menubar a.menuhead div.menu div.menuitem:hover
{
background-color: darkblue;
}
div.menuitem a
{
}
</style>
</head>
<body>
<div id="menubar">
<a class="menuhead" href="">Menu 1
<div class="menu">
<div class="menuitem">Menuitem 1</div>
<div class="menuitem">Menuitem 2</div>
<div class="menuitem">Menuitem 3</div>
<div class="menuitem">Menuitem 4</div>
<div class="menuitem">Menuitem 5</div>
</div>
</a>
</div>
</body>
</html>
Now what I want to do is put real hyperlinks inside of the menuitem divs. However, when I do so it messes up for some strange reason in both Firefox and IE. If someone could tell me why I would GREATLY appreciate it. Code:
<div id="menubar">
<a class="menuhead" href="">Menu 1
<div class="menu">
<div class="menuitem">Menuitem 1</div>
<div class="menuitem">Menuitem 2</div>
<div class="menuitem"><a href="">Menuitem 3</a></div>
<div class="menuitem">Menuitem 4</div>
<div class="menuitem">Menuitem 5</div>
</div>
</a>
</div>
In Firefox, the menu items after the one with the hyperlink no longer format correctly, and the menu also becomes part of the menubar. In IE it looks ok, but when the mouse is moved over the menuitem hyperlink the menu goes away. In both, the menuitem divs get shrunk down to the width of the text. Any ideas??? Hi, I have made a simple table in html, with mouseover on the rows to change the background colour. I also have onclick to take the user to the next page. What I really need to do is there a way of making a popup text, like the ones on this site's topic view. I have looked at the source code, and tried copying one <tr> row into a test html file, but no popup. Basically, my question is this: How can I make the table have a popup, for each <tr>, that shows non-dynamic text. Thanks in advance, Prism128 Thank you for stopping by! I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV. The problem description is quite simple; When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine. I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right. I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it. The content mostly consists of text of varied amounts and next to no images or other media content. If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated! Here's what the popup CSS looks like atm: Code: div.PopUp {
width: 550px;
border: dashed silver 1px;
display: none;
position: absolute;
left: 150px;
top: 50px;
background-color: black;
text-align: justify;
font-size: 10pt;
color: black;
}
Regards DrLaban Hi all, Thanks for the interest, I want to set my menus like the categories in alibaba.com ( the menu of the left side), on mouse over the sub menus should come up in the same way as here. How can I achieve this ? Thank you guys Good day to you all, I'm working on a css popup script. It work, but I would like the popup to be always in the center of the window. here is my code : PHP Code: echo "<a onmouseover=this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('".$value."').style.display = 'block' \" ><img src=\"".$directory."/".$value."\" width=\"50px\"></a>\n"; echo "<div id='".$value."' style='display: none; position: absolute; text-align:left; margin: -50px -200px; margin-top:-150px; z-index:50; border: solid black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; '>"; echo "<img src=\"".$directory."/".$value."\" /><br />".$value."<br/>"; echo "<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('".$value."').style.display = 'none' \" ><span style=\"color:#000000;\">Close</span></a></div></div>"; Thanks! I have seen it once but cannot find it. What I am looking for is a script or stylesheet code that when the mouse is over an image that is a link, a large size of that image will appear as a popup and disappear when mouse is removed, how do I do it or when can I find it. Thanks Tim Hi, I'm still relatively new to CSS and liquid layouts, so please bear with me. I've made a new layout using only CSS over he http://www.abhiram.astahost.com/trialcss/index.html and the CSS file is: http://www.abhiram.astahost.com/trialcss/mystyle.css Now, when I move the mouse over one of the menu buttons, there should be a popup text that appears below the the button. The problem is, I don't want the button size to increase when you move the mouse over it. This is happening because I've had to use 'position:relative'. Also, I don't want the 'content' and 'rightbar' regions moving down when you mouse over it. I've designed this in 1024x768 res. Any ideas? One way of doing it would be to use absolute positioning, but I want the text to appear below each button. Thanks a lot. Is it possible to have a CSS popup (a:hover) be positioned with regard to the mouse pointer position similar to a tooltip? I've been fighting with CSS popup menus for a while now, and finally got everything looking ... close enough ... in every browser at my disposal (even IE). Now, I've started filling my page with content and all hell's breaking loose again. *sigh* For some background info, this page has a menu at the top, and the content area directly below it. In the content area, I have two divs that generate what's supposed to look like a dialog window. The titlebar div has class "title", the main window area div, class "window" and ID'd "dlg1". The idea being that the "title" div can be clicked to make the "window" div display: none and fold up in a window-shade fashion via a JavaScript function. The script works flawlessly, astonishingly enough, and can be used so that several "dialogs" can exist on the page, independently expandable just by giving them different IDs. Now for the details: The menu is a CSS UL -> LI:hover -> UL { display: block } sort (with a cheat script to make IE a little less retarded.) I've set the z-index of the submenu UL to 1000, hoping nothing in the Z-stack would have a higher display precedence than THAT. Firefox displays everything perfectly. The menus stay on top, the scripts work, life is good. Opera 7 works pretty much the same way. The rollover effects are kind of slow, at least in the Linux version, but no big deal. KDE's Konqueror 3.3.1 has no problem with the title and window divs, but always hides the menu under the <textarea> form element inside the window div. This is not acceptable, but since I will be probably the only one who will use this page in KDE, I can even live with that. MSIE... god bless it... it can't help itself. The menu will draw over the title div, but not the window div. So: 1) Regarding Konqueror's problem, the CSS-over-Flash post below suggests that some elements are too specialized to expect reliable z-index support. Am I to understand that my <textarea> tag will probably never sit correctly in the Z-stack unless the user agent draws them from scratch (like Firefox and Opera seem to do)? ..and, most importantly... 2) Is there ANY reason anyone can see why my menu is weaving behind those divs in IE? Here is a link to all of my content. (It's seperated into a few files to ensure efficient use of the cache, and to make changes easier.) Main CSS file (holds common properties to all pages, regardless of content. Controls the menu, for example.) http://www.mtaonline.net/~nwallette/test/ttmsmain.css Secondary CSS file (holds properties common to all pages that use the window architecture described above.) http://www.mtaonline.net/~nwallette/test/ttmsdlg.css Main JavaScript file (holds code to activate the window-shade function, and some other stuff yet to come.) http://www.mtaonline.net/~nwallette/test/ttmsmain.js MSIE patch JavaScript file (called in an IE conditional statement to fix support for :hover over LI's.) http://www.mtaonline.net/~nwallette/test/stupidie.js ...and finally, the HTML that illustrates the problems. http://www.mtaonline.net/~nwallette/test/argh.html To see what I mean, you'll need to make sure the two "dialogs" are expanded (click on the title bars) and then hover over the Admin menu. Make sure your window size is small enough so the Admin menu dropdown covers part of the dialogs below it. To see the Konqueror problem, contract the first dialog and make sure the 2nd one is expanded, and the Admin menu covers part of the multi-line text box. Any ideas, anyone? Please?? I need a popup auto close in 3 second to show result is true. I try it in javascript,but no border is impossible in my ie8. I need it in css. Send me some solutions. THank all |
|||||||