|
CSS - Popping A New Window After Reading A Css
this is my code
PHP Code: <?php // XML file $file = "http://www.wired.com/news/feeds/rss2/0,2610,12,00.xml"; // set up some variables for use by the parser $currentTag = ""; $flag = ""; $count = 0; // this is an associative array of channel data with keys ("title", //"link", //"description") $channel = array(); // this is an array of arrays, with each array element representing an //<item> // each outer array element is itself an associative array // with keys ("title", "link", "description") $items = array(); // opening tag handler function elementBegin($parser, $name, $attributes) { global $currentTag, $flag; $currentTag = $name; // set flag if entering <channel> or <item> block if ($name == "ITEM") { $flag = 1; } else if ($name == "CHANNEL") { $flag = 2; } } // closing tag handler function elementEnd($parser, $name) { global $currentTag, $flag, $count; $currentTag = ""; // set flag if exiting <channel> or <item> block if ($name == "ITEM") { $count++; $flag = 0; } else if ($name == "CHANNEL") { $flag = 0; } } // character data handler function characterData($parser, $data) { global $currentTag, $flag, $items, $count, $channel; $data = trim(htmlspecialchars($data)); if ($currentTag == "TITLE" || $currentTag == "LINK" || $currentTag == "DESCRIPTION") { // add data to $channels[] or $items[] array if ($flag == 1) { $items[$count][strtolower($currentTag)] .= $data; } else if ($flag == 2) { $channel[strtolower($currentTag)] .= $data; } } } // create parser $xp = xml_parser_create(); // set element handler xml_set_element_handler($xp, "elementBegin", "elementEnd"); xml_set_character_data_handler($xp, "characterData"); xml_parser_set_option($xp, XML_OPTION_CASE_FOLDING, TRUE); xml_parser_set_option($xp, XML_OPTION_SKIP_WHITE, TRUE); // read XML file if (!($fp = fopen($file, "r"))) { die("Could not read $file"); } // parse data while ($xml = fread($fp, 4096)) { if (!xml_parse($xp, $xml, feof($fp))) { die("XML parser error: " . xml_error_string(xml_get_error_code($xp))); } } // destroy parser xml_parser_free($xp); // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> this is the part that generates what parts of the RSS you see, and the links... PHP Code: // now iterate through $items[] array // and print each item as a table row $i = 0; foreach ($items as $item) { if ($i > 2) { break; } echo "<tr><td><a href=" . $item["link"] . ">" . $item["title"] . "</a><br>" . $item["description"] . "</td></tr>"; $i++; } ?> How can I get the links displayed to pop in a new window, much like this... PHP Code: <a href="http://www.google.com/" target="_new"> This will pop in a new window(RAPP) ... basically, make the headers(which are links), to do _new window Similar TutorialsHi everyone, This is about to drive me to If you look at this page you will see the problem right away: cant post my url: See forum rules - well I'll be... Why is the name, address ect.. out side of my wrap? When I get rid of the <div id="wrapper"> it doesn't do it, but then I cannot get the whole page to center. my css for the page: Code: @charset "UTF-8";
/* CSS Document */
#header { text-align:center;
}
#footerlinks{ text-align:center;
}
#contact{ text-align:center;
}
#copyright{ text-align:center;
}
#wrapper {
width:960px;
margin:0px auto;
padding:15px;
background-color:#ffffff;
}
My form css: Code: @charset "UTF-8";
/* CSS Document */
form {font-family:"Trebuchet MS", Verdana, sans-serif;width:25em}
h2 {margin:0 0 0 0;padding:0}
p {margin:0 0 1em 0;padding:0;font-size:90%}
fieldset {background:#C361D2;border:none;margin-bottom:1em;width:24em;padding-top:1.5em}
p.legend {background:#794f9e;color:black;padding:.2em .3em;font-size:1.2em;border:2px outset #794f9e;position:relative;margin-bottom:-1em;width:10em;margin-left:1em;margin-top:1em}
#personal {background:#b57fe1;border:outset #b57fe1;}
#tours{background:#b57fe1;border:outset #b57fe1;}
#message {background:#b57fe1;border:outset #b57fe1;}
#personal label {position:absolute;font-size:90%;padding-top:.2em;left:20px}
#personal input {margin-left:9em;line-height:1.4em;margin-bottom:.2em;}
#choices label {position:absolute;padding-top:.2em;left:20px}
select {margin-left:0em;margin-bottom:0}
#size {font-size:90%}
#size input {margin-left:9em}
#size input + input {margin-left:1em}
#size br+ input {margin-left:9em}
#extras {font-size:90%}
#extras input {margin-left:9em}
#extras input +input {margin-left:1em}
#extras br+input {margin-left:9em}
textarea {font:.8em "Trebuchet MS", Verdana, sans-serif;width:29em;padding:.2em}
input[type="submit"], input[type="reset"] {background:#794f9e;font:1.2em "Trebuchet MS", Verdana, sans-serif}
#buttons {text-align:center}
My source code: cant post cuz of urls n stuff - If you wouldn't mind helping me out pm me and I can send you the link and you can see this weirdness. edit--> url is at http://lawofattractionfrequency.com My ultimate goal: I have some content contained in a scrolling div (overflow:auto). If I hover over one of the links contained within this scrolling div, I would like to get a Netflix-style popup to come up. I want it to overlap over top of the scrolling div. My current attempts have resulted only in the popup content opening within the scrolling div, and making the scrollable region larger. This is not very good as if the user attempts to scroll too see the content they are no longer hovering over the link and the content disappears. Thus, I want the popup to happen outside of the confines of the scrolling div. My test: I have created a test to get down to the basics. In example 1, the blue div overlaps the green one. The green div remains 400px but the blue div overlaps it extends beyond it to 800px. In example 2, I add overflow:auto to the outer (green) div. In this scenario, the outer green div gets enlarged to 800px, only 400 of which is visible, and the rest hidden in the scrollable area. The inner blue div does not overlap the scrollable region so that the full 800px is visible. What I would like to see is for the green div to stay at 400px but have the blue div cover up the scroll bar and overlap the confines of the scrollable region. Is this at all possible? Any help is appreciated. I don't necessarily have to use divs.. anything I can use to get the job done would be great. Example 1: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> Example 2: <html><body> <div style="background:green;height:200px;width:400px;z-index:0;position:absolute;overflow:auto;"> <div style="background:blue;height:100px;width:800px;z-index:1;position:absolute;"></div> </div> </body></html> For some reason (therefore contradicting my thread title) the horizontal scroll bar keeps popping up on my site. I've gone through and checked the width of all my divs and everything seems to be checking out. Here is the site university square condos (dot) com Any idea where I could be going wrong? Hi folks- This may be a bit off the wall, but what the heck... Is it possible to set up a portion of a document, a "region", if you will, that acts like an external file? I have an E-mailed news service page that's set up using CSS to look and act like a three-column frameset. All three windows can scroll and load independently. I'd like the user to be able to click on an icon in the left column and load data into the column next to it. The hitch is that since this is an E-mailed document, it would be good to have all necessary data self-contained, if possible, rather than accessible remotely via absolute URLs (to avoid having to make the subscriber go to a web site and enter a user name and password). I know that I can load external files into a given "column" by referincing an absolute URL, but does anyone know if it's possible to load only a portion of the current document? (as opposed to simply jumping within the document to a specific point, as with a "name" anchor? Thanks in advance. - Tom Tedeschi Hi, I am using html and css to design a website. My problem is that when I resize the web browser, all of the elements reposition themselves accordingly. Is there some to keep them all fixed in position? Thanks! First of all I apologize if this is a stupid question, I am 1st year student. For the project I had to make an IT store type website. My problem is I have two div's in the container which i have positioned to be fixed at the top left of the page outside the container, this is so the user can see these div's at all times. When I make the window smaller it shrinks to the container and the div's in question appear on top of the content. I have tried styling the body with margins, padding and min-width. All I want is the page to remain the same when I re-size the window. I hope this is enough info for someone to understand my problem, i have included the css from the parent div's any help would be greatly appreciated. * { margin: 0; padding: 0; } * html #container { height: 100%; } html { height:100% !important; background-attachment: fixed; background-clip: border-box; background-color: transparent; background-image: url(../images/header/Home.jpg); background-origin: padding-box; background-position: center; background-repeat: no-repeat; background-size: cover; } body { height:100% !important; } #outer { width: 100%; height: 100%; } #container { min-height: 100%; width:940px; padding: 8px 10px; background: #000; margin:0 auto; text-align:left; font-size: 100%; overflow: hidden; } * html #container { height: 100%; } hey all, hopefully someone in here will be able to help me. what I am interested in is how to tell a div to render at the base of the page, once I have it there I intend to make it float so that it is always at the base. does anyone know the x,y positions for the very bottom of the displayed window? any help would be greatly appreciated, thanks in advance. I'm creating a site that works fine in FF. However, in IE, if I resize the window, the content doesn't move until I refresh the page. When I refresh the page, everything is centered again, but dragging IE to a new size, keeps everything in the same spot. Is there a fix for this? Unfortunately, I don't have the site posted, but may be able to throw it up somewhere if needed. Thanks. Edit: Nevermind. Had the body set to a certain width. Took that out and it works. 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! Hello All. I'm working on an assignment for an introductory level html/css class. The assignment asks me to change the Window Background color to 666666. How do i do this? So far i've only be able to change background colors of element tags, which is not what i need. This was the Example give for this particular step. Edit: i tried to link a picture for a visual. For some reason its blocked to new members. Any help would be appreciated. I'm having some problems when I resize a window from full size and make it smaller in width. I have a stationary graphic that remains in position even if the user scrolls the window up and down, which is what it is supposed to do. However, when I reduce the width of the overall window, the background now scrolls right and left and the graphic covers things it is not supposed to. Is there a way to allow the graphic to scroll right and left if the window can be scrolled right and left but to leave the graphic stationary otherwise? Here's what I have in the style sheet: Code:
.pagegraphic{
float:left;
height:173px;
position: fixed; /* this keeps the coin fixed and allows the background to scroll behind it */
width:170px;
z-index:99;
}
Another problem that occurs when the user can scroll horizontally. When the user resizes and then scrolls right, the background of the window is cut off on the right to the size of the resized window, so you only see a white background past that point. Any suggestions are appreciated. I'm trying to build a window script. To start with I'm just trying to finalize the HTML needed for the window. You'll find my attempt below. The first one is before adding close and resize elements. It seems an ok starting point. The 2nd one shows my attempt to add the close & resize elements. The difficulty is in making them line up with the right hand side of the window and making the top one not take up an extra line. The problem is that I don't want to specify the size of the 'window' div because I want it to expand to fit the content. Because there is no width set any attempt to align right ends up aligning with the right hand side of the browser window. Anyone got some ideas as to how I deal with this? Am I approaching it wrong? 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Document</title>
<style type="text/css">
html, body
{
margin: 0px;
}
.window
{
background: gray;
position: absolute;
border: 1px solid black;
top: 20px;
left: 20px;
}
.ex2
{
left: 300px;
}
.topBar
{
position: relative;
color: white;
margin: 2px;
}
.ex2 .topBar
{
background: none;
}
.closeButton
{
width: 16px;
height: 16px;
background: red;
}
.window .content
{
width: 200px;
height: 200px;
background: white;
overflow: auto;
}
.bottomBar
{
position: relative;
}
.ex2 .bottomBar
{
background: none;
}
.resizeHandle
{
background-color: green;
height: 16px;
width: 20px;
}
</style>
</head>
<body>
<div class='window'>
<div class='topBar'>
Title
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'> </div>
</div>
<div class='window ex2'>
<div class='topBar'>
Title <div class='closeButton'> </div>
</div>
<div class='content'>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
Content goes here<br>
</div>
<div class='bottomBar'><div class='resizeHandle'> </div></div>
</div>
</body>
</html>
Hello, I have a menu to the right and the main content is on the left. When I resize the window the content drops below the menu. Is there anyway to stop this from happening? [Do you need to see code?] Cheers Hello; Could anyone tell me how to addjust my result to the top(10% away from the top)? please. I try to use margin-top:10%, but it does not work. Please go to my website http://www.businessfind101.com/ and type the sentence with "MySql YourSql" into search function, you will see the result in the button, i have not idea to move them up. and my code as following; Code:
php
session_start();
$aString=$_REQUEST["SText"];
$_SESSION["aString"]=$aString;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table.display{margin-top:10%}
</style>
<body>
<?php
$con = mysql_connect("localhost", "#*$!","1#*$!");
if (! $con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("#*$!x", $con);
$result = mysql_query("select * from Customer2");
// was it a success
if (!$result)
die ("Error processing request - check your query");
// process results
$nrecs = mysql_num_rows($result);
/* Use tab and newline as tokenizing characters as well */
$tok = strtok($aString, " ");
while ($tok!== false) {
$len=strlen($tok);
$len=$len/2+1;
$tok=substr($tok,0,$len);
$b="tu";
$myresult=mysql_query("SELECT * FROM Customer2 WHERE MATCH (Topic,Des)
AGAINST ('$tok*' IN BOOLEAN MODE);");
while($row=mysql_fetch_array($myresult)){
echo "<br>";
echo "<br>";
echo " ";
$Cid=$row['Cid'];
echo " ";
$row['Count']=$row['Count']+1;
$Count=$row['Count'];
mysql_query("update Customer2 set Count='$Count' where Cid='$Cid'");
}
$tok = strtok(" ");
}
$result = mysql_query("select * from Customer2");
echo "<table border=0 width=50% class='display' bgcolor='ccffff'>";
//i will display result on the screen
while ($row=mysql_fetch_array($result)){
if($row['Count'] >0){
echo "<tr><td>";
echo $row['Des'];
echo "</td><td>";
echo $row['Count'];
echo "</td> </tr>";
}
}
$f=0;
mysql_query("update Customer2 set Count='$f'");
echo "</table>";
mysql_close($con);
?>
</body>
</html>
I know how to do html or java for an alert pop-up window. But, I don't know how to do that in CSS format. I'm trying to add the alert pop-up window IN my myspace layout which is CSS coded already. I just need the CSS code for it. Can anyone help? Hi. I have recently 'finished' my website, currently at http://www.aslo50.dsl.pipex.com I have positioned the images of the album cover absolutely (http://www.aslo50.dsl.pipex.com/music.htm) but they are jumping about when the browser window is resized. They are also overlapped on browser windows with different screen resolutions. The Navigation Buttons are also stacking and overlapping in this manner although they are just positioned in flow. I would be really grateful for any help you can offer. Thanks Here's how the footer looks now: And here's the desired result: Any ideas? It'll have to be cross-browser friendly (even IE6, god help me). Thanks! Is there a way to expand the height and width of a DIV to the height and width of the document, not the browser window? When I set it too 100%, and scroll, the div remains the size of the original window. The DIV is for a background grey out screen, and I want it to encompass the height and width of the document and persist when scrolling. Explicitly setting height and width with pixels doesn't work, because that depends on the user's screen resolution. Any thoughts? Many thanks... Good day, I'm hoping to have this content right up against the top of the browser window. I've played around with padding values, but they don't seem to do anything and I'm unsure of what to try next. Any advice appreciated. Code: #sectionHeader {
width: 800px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
Code: <body> <div id="sectionHeader"> <img src="images/header.jpg" alt="Welecome to Doctor Martin's Site" width="800" height="321" border="1" /> </div> </body> Here's my entire code, sweet und simple: Code: body
{
background-image: url('');
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
position: absolute;
background-color: #999999;
overflow: scroll;
border:0px;
border-style: solid;
font-family: garamond;
color: #000000;
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #AE2473;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-Color: #000000;
}
a:link
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
a:visited
{
color: #232323;
text-decoration: none;
font-weight: bold;
}
a:hover
{
color: #ffffff;
text-decoration: underline overline;
font-weight: bold;
}
a:active
{
color: #000000;
text-decoration: none;
font-weight: bold;
}
.main
{
background-color: transparent;
height: 900px;
width: 900px;
border-style: solid;
position: fixed;
overflow: scroll;
font-family: garamond;
color: #000000;
}
.header
{
background-color: #ffffff;
height: 100px;
width: 800px;
border: 1px;
border-style: solid;
position: absolute;
overflow: auto;
left: 50px;
font-family: garamond;
color: #000000;
}
.sidebar
{
background-color: #ffffff;
height: 600px;
width: 200px;
border: 1px;
border-style: solid;
position: absolute;
top: 125px;
left: 640px;
font-family: garamond;
color: #000000;
}
.index
{
background-color: #ffffff;
height: 600px;
width: 575px;
border: 1px;
border-style: solid;
position: absolute;
top: 125px;
left: 50px;
font-family: garamond;
color: #000000;
}
.footer
{
background-color: #ffffff;
height: 100px;
width: 800px;
border: 1px;
border-style: solid;
position: absolute;
left: 5%;
top: 750px;
left: 50px;
font-family: garamond;
color: #000000;
}
h1
{
background-color: #999999;
color: #ffffff;
width: 700px;
height: 35px;
border: 5px;
border-color: #000000;
border-style: double;
cellpadding: 0;
cellspacing: 0;
}
All I need help with, is aligning "MAIN" so that it scales to the browser, like this one here does: http://www.jonathanwold.com/tutorials/wordpress_theme/preview/ the page and all it's content scales over as you widen/shorten it. I tried using absolute and fixed. Fixed works for scaling, but it doesn't scroll, my tables go off the page without being able to scroll down and see it all. Absolute enables scrolling, but it sticks to the left hand side. No matter what :\ and none of the % commands work ( ie, left: 20%; ) Anyone can help? |
|||||||