Search Results

Search found 2898 results on 116 pages for 'solid'.

Page 105/116 | < Previous Page | 101 102 103 104 105 106 107 108 109 110 111 112  | Next Page >

  • localStorage not working in IE9 and Firefox

    - by maha
    I am working with localStorage. My code is perfectly working in Chrome, but not in IE9 and Firefox. Here is the code: document.addEventListener("DOMContentLoaded", restoreContents, false); document.getElementsByTagName("body")[0].onclick=function(){saveContents('myList','contentMain', event, this);}; function amIclicked(e, eleObject) { alert("amIClicked"); e = e || event; var target = e.target || e.srcElement; alert("target = " + target.id); if(target.id=='pageBody' || target.id=='Save') return true; else return false; } function saveContents(e, d, eveObj, eleObject) { //alert("saveContents"); if (amIclicked(eveObj, eleObject)) { var cacheValue = document.getElementById(e).innerHTML; var cacheKey = "key_" + selectedKey; var storage = window.localStorage; //alert ("cacheKey = " + cacheKey + " ,cacheValue = " + cacheValue); if(typeof(Storage)!=="undifined"){ localStorage.setItem("cacheKey","cacheValue"); } //alert ("Saved!!"); var dd = document.getElementById(d); //document.getElementById("contentMain").style.display == "none"; dd.style.display = "none"; } } function restoreContents(e,k) { //alert("test"); if(k.length < 1) { return; } var mySavedList = localStorage["key_" + k]; if (mySavedList != undefined) { document.getElementById(e).innerHTML = mySavedList; } } <a onclick="ShowContent('contentMain','myList','Sample_1'); return true;" href="#" >Sample 1</a><br/><br/> <a onclick="ShowContent('contentMain','myList','Sample_2'); return true;" href="#" >Sample 2</a><br/><br/> <div style="display:none;display:none;position:absolute;border-style: solid;background-color: white;padding: 5px;"id="contentMain"> <ol id="myList" contenteditable="true"> <li>Enter Content here</li> </ol> <!--<input id="editToggleButton" type="button" value="Edit"/>--> </div> When I debugging in Iexplore Iam getting the error as SCRIPT5007: Unable to get value of the property 'length': object is null or undefined sample_1.html, line 157 character 3 Thanks

    Read the article

  • how to facebook shoutbox open , with clicked friendname

    - by Surendra Singh
    Hey everyone i need source code for shotbox open with clicked friend name like facebook i tried it but ... it is opening with only one friend name .... i want it will open with the name of friend whom name or image is clicked My code is something like this <tr data-name="<?php echo $online_user_name; ?>"> <td> <div <?php echo $online_user_id; ?>"> <img src="../../social_users/<?php echo $online_user_gender; ?>/<?php echo $online_user_Email; ?>/Profile/<?php echo $online_user_pic; ?>" height="30" width="30" style="border-radius: 20px; border: 2px solid #fff;" onclick="shoutbox_open();"> </div> </td> <td style="color:#ffffff;"> <div <?php echo $online_user_id; ?> style="text-transform:capitalize; text-decoration:none; color:#6A7480;" onclick="shoutbox_open();"> <?php echo $online_user_name; ?> </div> &nbsp; </td> <td> <img src="background_file/background_icons/online_symbol.png" /> </td> </tr> <div id="shout_box"> <div id="header" > <span> <?php echo $online_user_name; ?> </span> <div id="close_btn" onclick="shoutbox_close();"> &nbsp; </div> </div> <div id="toggle_chat"> <div id="message_box"> </div> <div id="user_info"> <input name="shout_username" id="shout_username" type="text" placeholder="Your Name" value="" maxlength="15" /> <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> </div> </div> </div>

    Read the article

  • exclude private property from print_r or object?

    - by Hailwood
    Basically I am using Code Igniter, and the Code Igniter base class is huge, when I print_r some of my objects they have the base class embedded inside them. this makes it a pain to get the information I actually wanted (the rest of the properties). So, I am wondering if there is a way I can hide, or remove the base class object? I have tried clone $object; unset($object->ci); print_r($object); but of course the ci property is private. the actual function I am using for dumping is: /** * Outputs the given variables with formatting and location. Huge props * out to Phil Sturgeon for this one (http://philsturgeon.co.uk/blog/2010/09/power-dump-php-applications). * To use, pass in any number of variables as arguments. * Optional pass in "true" as final argument to kill script after dump * * @return void */ function dump() { list($callee) = debug_backtrace(); $arguments = func_get_args(); $total_arguments = count($arguments); if (end($arguments) === true) $total_arguments--; echo '<fieldset style="background: #fefefe !important; border:2px red solid; padding:5px">'; echo '<legend style="background:lightgrey; padding:5px;">' . $callee['file'] . ' @ line: ' . $callee['line'] . '</legend><pre>'; $i = 0; foreach ($arguments as $argument) { //if the last argument is true we don't want to display it. if ($i == ($total_arguments) && $argument === true) break; echo '<br/><strong>Debug #' . (++$i) . ' of ' . $total_arguments . '</strong>: '; if ((is_array($argument) || is_object($argument)) && count($argument)) { print_r($argument); } else { var_dump($argument); } } echo '</pre>' . PHP_EOL; echo '</fieldset>' . PHP_EOL; //if the very last argument is "true" then die if (end($arguments) === true) die('Killing Script'); }

    Read the article

  • How do I center this CSS?

    - by sarthaksss
    Here is the CSS - #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider2{margin-top:1em;} #slider li, #slider2 li{ /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:500px; height:250px; overflow:hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev{ display:block; width:30px; height:77px; position:absolute; left:-30px; top:71px; z-index:1000; } #nextBtn, #slider1next{ left:696px; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{ display:block; position:relative; width:30px; height:77px; background:url(../images/btn_prev.gif) no-repeat 0 0; } #nextBtn a, #slider1next a{ background:url(../images/btn_next.gif) no-repeat 0 0; } /* numeric controls */ #slider img{ width:500px; height:300px; } ol#controls{ margin:1em 0; padding:0; height:28px; } ol#controls li{ margin:0 10px 0 0; padding:0; float:left; list-style:none; height:28px; line-height:28px; } ol#controls li a{ float:left; height:28px; line-height:28px; border:1px solid #ccc; background:#b32d45; color:white; padding:0 10px; text-decoration:none; } ol#controls li.current a{ background:#5DC9E1; color:#fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;} I want to center the #slider HTML <div id="slider"> <ul> <li>IMAGE</li> <li>IMAGE2</li> </ul> </div>

    Read the article

  • I always get stuck here... Divs not behaving properly (alignment issues)

    - by user345501
    Hi, I don't know why, after encountering this problem dozens of times, the answer always seems different and I can't seem to work my way through the problem-solving process, but here I am again with misaligned divs. I've got 3rows encasing columns. each row is to have (at least) 3 columns (and probably some nested divs down the line, but I'm not even there yet). I'm trying to make a fluid chunk in the center ultimately, with pretty corners. However, my top row is already showing signs of misbehaving. .O Please help with my silly questions! Cheers and thanks in advance! <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> #wrap { margin:auto; width:80%; height:75%; border: solid #066 1px;} #row1 { width:100%; height:10%; background:#F20; } #r1c1 { float:left; width:05%;} #r1c2 { float:left; width:80%} #r1c3 { clear:both; width:05%; } #row2 { float:none; width:100%; background:#0C6; } #r2c1 {} #r2c2 {} #r2c3 {} #row3 { width:100%; height:15%; background:#00F; clear:both; } #r3c1 {} #r3c2 {} #r3c3 {} </style> <body> <div id="wrap"> <div id="row1"> <div id="r1c1">LEFT</div> <div id="r1c2">CENT</div> <div id="r1c3">RIGHT</div> </div> <div id="row2"> MIDDLE </div> <div id="row3"> BOTTOM </div> </div> </body> </html>

    Read the article

  • mysql_fetch_array() expects parameter 1 to be resource problem

    - by user225269
    I don't get it, I see no mistakes in this code but there is this error, please help: mysql_fetch_array() expects parameter 1 to be resource problem <?php $con = mysql_connect("localhost","root","nitoryolai123$%^"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("school", $con); $result = mysql_query("SELECT * FROM student WHERE IDNO=".$_GET['id']); ?> <?php while ($row = mysql_fetch_array($result)) { ?> <table class="a" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D3D3D3"> <tr> <form name="formcheck" method="get" action="updateact.php" onsubmit="return formCheck(this);"> <td> <table border="0" cellpadding="3" cellspacing="1" bgcolor=""> <tr> <td colspan="16" height="25" style="background:#5C915C; color:white; border:white 1px solid; text-align: left"><strong><font size="2">Update Students</td> <tr> <td width="30" height="35"><font size="2">*I D Number:</td> <td width="30"><input name="idnum" onkeypress="return isNumberKey(event)" type="text" maxlength="5" id='numbers'/ value="<?php echo $_GET['id']; ?>"></td> </tr> <tr> <td width="30" height="35"><font size="2">*Year:</td> <td width="30"><input name="yr" onkeypress="return isNumberKey(event)" type="text" maxlength="5" id='numbers'/ value="<?php echo $row["YEAR"]; ?>"></td> <?php } ?> I'm just trying to load the data in the forms but I don't know why that error appears. What could possibly be the mistake in here?

    Read the article

  • CSS- removing horizontal space in list menu using display inline property

    - by Kayote
    Hi All, Im new to CSS and have a set target of learning & publishing my website in CSS by the end of the month. My question: Im trying to build a CSS horizontal menu with hover drop downs, however, when I use the 'display: inline' property with li (list) items, I get horizontal spaces between the li (list) items in the bar. How do I remove this space? Here is the html: <div id="tabas_menu"> <ul> <li id="tabBut0" class="tabBut">Overview</li> <li id="tabBut1" class="tabBut">Collar</li> <li id="tabBut2" class="tabBut">Sleeves</li> <li id="tabBut3" class="tabBut">Body</li> </ul> </div> And here is the CSS: #tabas_menu { position: absolute; background: rgb(123,345,567); top: 110px; left: 200px; } ul#tabas_menu { padding: 0; margin: 0; } .tabBut { display: inline; white-space: list-style: none; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,142,190,1)),to(rgba(188,22,93,1))); background: -moz-linear-gradient(top, rgba(255,142,190,1), rgba(188,22,93,1)); font-family: helvetica, calibri, sans-serif; font-size: 16px; font-weight: bold; line-height: 20px; text-shadow: 1px 1px 1px rgba(99,99,99,0.5); -moz-border-radius: 0.3em; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); -webkit-border-radius: 0.3em; -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 6px 18px; border: 1px solid rgba(0,0,0,0.4); margin: 0; } I can get the space removed using the 'float: left/right' property but its bugging me as to why I cannot achieve the same effect by just using the display property.

    Read the article

  • How to control the text inside DIV tag by not allowing the text to be increased?

    - by SzamDev
    Hi I have this CSS code : #d_image { float: left; width: 320px; margin-top: 20px; margin-left: 25px; } #d_coll { width: 320px; float: left; } #n_div { width: 240px; text-align: right; padding-top: 10px; float: left; padding-right: 10px; padding-left: 0px; } #n_text { text-align: right; float: left; clear: both; } #im { height: 50px; width: 50px; float: right; padding-right: 15px; } #n_col { clear: both; width: 310px; float: right; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #CCC; padding-bottom: 10px; } #n_tittle { text-decoration: none; text-align: right; padding-bottom: 10px; padding-right: 15px; } #n_tittle a { text-decoration: none; text-align: right; color: #1C60B3; } #n_tittle a:hover { text-decoration: underline; text-align: right; color: #FF0000; } I have this HTML code : <div id="d_coll"> <div id="d_image">sample text</div> <div id="n_text">Here will be photo</div> </div> <div id="n_col"> <div id="n_tittle">sample text</div> <div id="im">small photo will be here</div> <div id="n_div">long text</div> </div> I have proplem in n_div, if I put in it a very long text it will be under im div and I want the text inside it to go to new line when it reach the end because the image should be to the right of the text in im div . How I can do that? Thanks in Advance.

    Read the article

  • ie8 playing funny with list-style-position: inside

    - by LeeR
    Ok, So problem here... when using list-style-position:inside in IE8 the first like is indented but every line after that is not. So the new lines appear under the bullet. This is fine, but when I use a list with that css applied with an a tag within the li then the text automatically gets pushed to the second line, and the first line is empty. When I remove the a tag from the li then it jumps back up. Any idea on why this might be or is this a bug in the ie8 world or do I just need to double check my css? Any insights would be much appreciated. As asked here is some code <div id="sub_nav"> <ul> ... <li><a class="active_page" href="#">Liposculpture</a> <ul> <li><a href="#">What is Liposculpture?</a></li> <li><a href="#">About Liposculpture surgery</a></li> <li><a href="#" class="active_sub">After Liposculpture surgery</a></li> <li><a href="#">Post Op Instructions</a></li> <li><a href="#">Liposculpture Side Effects</a></li> <li><a href="#">Liposuction Introduction to</a></li> <li><a href="#">Tumescent Liposculpture</a></li> </ul> </li> ... </ul> </div> For the CSS I will try and show it best I can #sub_nav li { width: 200px; padding:4px 0; border-bottom: 1px #CCC solid; } #sub_nav li a { text-decoration: none; color:#555; padding:7px 15px 7px 15px; display: block; } #sub_nav li ul li { list-style-position: inside; list-style-type: disc; font: 11px Arial; padding-left:15px; color:#FFF; border-bottom: none; } #sub_nav li ul li a { padding:0; margin:0; text-indent: 0; } Hope this helps

    Read the article

  • Difference in displaying inner div between IE and Chrome

    - by Gaara
    I have this code that has one "outerDIV" that contains an "innerDIV". On chrome the "innerDIV" size is 491px, whereas on IE it is 425px (same as outerDIV). Hence, on Chrome I can see the first two children of "innerdiv": "My test string #1" and "test2". But for IE I can only see the first child. I am not quite sure what the "right" behavior should be, as firefox does the same as IE. However I would like to have IE do the same as Chrome. I have been experimenting with some css styles (mainly overflow and display), but still can't make it right: IE will expand its height instead of its width to make the elements fit. Can you guys help me figure out a way to change the css so that IE will wraps the div elements inline? As a restriction though, I cannot change the width on the HTML. As a benefit, I am using a css that only loads for IE to patch these kind of IE inconsistencies. The same css will NOT load for chrome, so I don't need to worry about messing with chrome when changing the IE CSS. Thanks in advance! <html> <head> <style type="text/css"> <!-- body { font-family: helvetica; } .myContainer { overflow: hidden; border: 1px solid rgba(0, 0, 0, .5); font-size: 14pt; height: 49px; line-height: 49px; overflow: hidden; display: block; } .myContainer > DIV { float: left; white-space: nowrap; display: block; } .myContainer .item:first-child { padding-left: 10px; } .myContainer .item { float: left; padding-right: 32px; } --> </style> </head> <body> <div id="outerDIV" class="myContainer" style="display: block; width: 425px;"> <div id="innerDIV"> <div class="item"> --------My test string #1-------- </div> <div class="item"> ------test2------- </div> <div class="item"> test </div> </div> </div> </body> </html>

    Read the article

  • IE8 ignores absolute positioning and margin:auto

    - by tuff
    I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9. My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox. 1) Why? 2) What are my options for workarounds? EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff. HTML: <div class="bg"> <div class="a"> <div class="aa">titlebar</div> <div class="b"> <!-- many lines of content here --> </div> </div> </div> CSS: body { overflow: hidden; height: 100%; margin: 0; padding: 0; } /* IE8 needs ruleset above */ .bg { background: #333; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */ } .a { background: #eee; border: 3px solid #000; height: 80%; max-height: 800px; min-height: 200px; margin: 0 auto; position: relative; width: 80%; min-width: 200px; max-width: 800px; } .aa { background: lightblue; height: 28px; line-height: 28px; text-align: center; } .b { background: coral; overflow: auto; padding: 20px; position: absolute; top: 30px; right: 0; bottom: 0; left: 0; } Here's a demo of the problem: http://jsbin.com/urikoj/1/edit

    Read the article

  • How do you hide an image tag based on an ajax response?

    - by Chris
    What is the correct jquery statement to replace the "//Needed magic" comments below so that the image tags are hidden or unhidden based on the AJAX responses? <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>JQuery</title> <style type="text/css"> .isSolvedImage{ width: 68px; height: 47px; border: 1px solid red; cursor: pointer; } </style> <script src="_js/jquery-1.4.2.min.js" type="text/javascript"> </script> </head> <body> <div id='true1.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <div id='false1.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <div id='true2.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <div id='false2.txt' class='isSolvedImage'> <img src="_images/solved.png"> </div> <script type="text/javascript"> $(function(){ var getDivs = 0; //iterate div with class isSolvedImage $("div.isSolvedImage").each(function() { alert('div id--'+this.id); // send ajax requrest $.get(this.id, function(data) { // check if ajax response is 1 alert('div id--'+this.url+'--ajax response--'+data); if(data == 1){ alert('div id--'+this.url+'--Unhiding image--'); //Needed magic //Show image if data==1 } else{ alert('div id--'+this.url+'--Hiding image--'); //Needed magic //Hide image if data!=1 } }); }); }); </script> </body> </html>

    Read the article

  • CSS / HTML - Image will not show up

    - by weka
    Ugh, ok. I've been up all night working this thing and now an image won't show. It's so darn annoying. Trying to get this .png image to show up on a simple PHP webpage. I just wanna go to sleep X_X CSS: <style> .achievement { position:relative; width:500px; background:#B5B5B5; float:left; padding:10px; margin-bottom:10px; } .icon { float:left; width:32px; height:32px; background: url("images/trophy.php") no-repeat center; padding:05px; border:4px solid #4D4D4D; } .ptsgained { position:absolute; top:0; right:0; background:#79E310; color:#fff; font-family:Tahoma; font-weight:bold; font-size:12px; padding:5px; } .achievement h1 { color:#454545; font-size:12pt; font-family:Georgia; font-weight:none; margin:0;padding:0; } .achievement p { margin:0;padding:0; font-size:12px; font-family:Tahoma; color:#1C1C1C; } .text { margin-left:10px; float:left; } </style> HTML: <div class="achievement"> <span class="ptsgained">+10</span> <div class="icon"></div> <div class="text"><h1>All Around Submitter</h1> <p>Submit and have approved content in all 6 areas.</p> </div> </div> What am I doing wrong, guys? :\

    Read the article

  • May be an IE z-index bug?

    - by baikaishiuc
    Below is my code. when open the page in ie browser, then select the text in div, the text will be replaced by some shadow quad blank . If you delete a line z-index:0, in css class test1, the ie will perform correctly. In my project , the z-index must be set greater than zero, so I couldn't delete the line. I found a solution is to set bg_img.filter = "" when pannel.z-index greater than 0, then ie will also working good. But unfortunately, the bg_img.filter.alpha must be set, too. So how could I do? test .test1 { position:absolute; background:#ffffff; left:20px; top:20px; border:1px solid; width:198px; height:500px; filter: progid:DXImageTransform.Microsoft.Shadow(color="#999999", Direction=135, Strength=5); z-index:0; } </style> <script> function init () { var pannel = document.createElement ('div'); var bg_img = document.createElement ('div'); var head = document.createElement ('div'); pannel.setAttribute('class', 'test1'); pannel.setAttribute('className', 'test1'); bg_img.style.cssText = "position:relative;left:0px;top:0px;" + "width:198px;" + "height:500px;" + "filter:alpha(opacity=100);"; head.style.cssText = "position:absolute;" + "left:0px;" + "top:0px;" + "width:180px;" + "height:20px;"; document.body.appendChild (pannel); pannel.appendChild(bg_img); pannel.appendChild(head); head.innerHTML = "<div>yusutechasdf</div><div>innerhtml</div>" } </script>

    Read the article

  • Add color to selected <li> item / override <ul> style

    - by Alana
    I have navigation for which I need to set a color for the selected item. It's flat HTML and CSS. Here's the menu code: <ul id="top_navigation"> <li class="border_red"><a href="index.html">Home</a></li> <li class="border_red"><a href="about.html">About</a></li> <li class="border_red"><a href="services.html"><font color="#cf3533">Services</font></a></li> <li class="border_red"><a href="careers.html">Careers</a></li> <li class="border_red"><a href="news.html">News</a></li> <li class="border_red"><a href="sitemap.html">Sitemap</a></li> <li><a href="contact.html">Contact</a></li> </ul> And here's the CSS - there's the basic set up and then a class to put the pipe between the items: #top_navigation { width: 696px; margin: 0px; padding: 0 0 0 4px; list-style-type: none; overflow: hidden; } #top_navigation li { width: auto; height: 17px; margin: 0px; padding: 1px 10px 0 10px; float: left; } #top_navigation li a { margin: 0px; padding: 0px; display: block; font-size: 12px; text-align: center; text-decoration: none; } #top_navigation li a:hover { color: #cf3533; } This sets the pipe on the right. .border_red { border-right: 1px solid #d7d7d7; } I tried combining the two and creating a _selected style, and the pipe shows up, but I can't get the color to change for the selected. I have to be WCAG Priorities 1,2,3-compliant, so I can't just set it manually with .

    Read the article

  • jquery mouseent/leave to make div appears

    - by Blake
    I am looking to hover over my list item and have an effect similar to something like facebook chat is my best example..I am able to get the first div to appear but I believe this may be a selector issue because I cant get the rest working properly html <ul id="menu_seo" class="menu"> <li id="menu-seo"><span class="arrowout1"></span>SEO</li> <li id="menu-siteaudits"><span class="arrowout2"></span>Site Audits </li> <li id="menu-linkbuilding"><span class="arrowout3"></span>Link-Building</li> <li id="menu-localseo"><span class="arrowout4"></span>Local SEO</li> </ul> <div id="main_content"> <div id="menu-seo-desc"> <p>SEO management begins with a full website diagnosis of current web strategy Adjustments are made to improve your site’s ability to rank higher on search engines and draw more traffic </p> </div> <div id="menu-seo-desc2"> <p>Usability & site architecture review, Search Engine accessibility and indexing, Keyword research & targeting and Conversion rate optimization </p> </div> </div> css #menu-seo-desc { height:125px; width:210px; background-color:red; border-color:#CCC #E8E8E8 #E8E8E8 #CCC; border-style:solid; border-width:1.5px; border-radius:5px; box-shadow: 1px 0 2px 0px #888; -moz-box-shadow: 1px 0 2px 0px #888; -webkit-box-shadow: 1px 0 2px 1px #888; position:absolute; top:220px; left:350px; display:none; } js <script> $(document).ready(function(){ <script> $(document).ready(function(){ $('#menu_seo').on('#menu-seo', { 'mouseenter': function() { $('#menu-seo-desc').fadeIn(600); $('#menu-seo-desc2').fadeIn(600); }, 'mouseleave': function() { $('#menu-seo-desc').fadeOut(300); $('#menu-seo-desc2').fadeOut(300); } }); }); </script> });

    Read the article

  • 3 column html template - content overflows though there is clear both and height is 100%

    - by MeltingDog
    I have 3 divs within a wrapper: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"> Lorem ipsum dolar sit amet </div><!--RIGHTBAR--> </div><!--wrapper--> Both 'leftbar' and 'middle' are floating left, whilst 'rightbar' is floating right. 'wrapper' has height:100%; clear:both; set. However, if there is a large amount of text or content in 'middle' it overflows the 'wrapper' div. I am struggling to figure out why this is occurring. My CSS is: #wrapper { width: 1000px; height: 100%; margin:auto; padding: 30px; margin-top: 40px; background-color:#FFF; color:#000; border: 2px solid #828fc4; clear:both; } #leftbar { float:left; width: 150px; min-height: 450px; padding: 5px; } #middle { float:left; height: 100%; width: 580px; padding-left: 20px; padding-right: 20px; border-right: 1px dotted #2B308C; border-left: 1px dotted #2B308C; } #rightbar { float:right; width: 200px; min-height: 450px; padding: 5px; } Any advice is appreciated! EDIT: here is the issue on a test server: http://host.pixelframe.net.au/~pptestco/index.php?id=20

    Read the article

  • My horizontal drop down with CSS, sub navigation menu items are being displayed on top of each other

    - by Rigo Collazo
    my sub navigation menu items are being displayed on top of each other here is the code: /* NAVIGATION */ .nav-bar {width: 100%; height: 80px; background-image:url(../images/bg-menu80.jpg);} .nav-hold {overflow: hidden;} .nav-list {float: right;} .nav-list li {float: left; width: auto; position: relative;} .nav-list li a {text-decoration: none; display:block; padding: 30px 7px 20px 7px; color: #f9f9f9; font-size: .9em; font-weight: bold;} .nav-list li ul {display: none;} .nav-list li a:hover {text-decoration: none; display: block; padding: 30px 7px 20px 7px; color: #000; font-size: .9em; font-weight: bold; background-color: #e7e4e4;} .nav-list li a:hover li{display: block; position: absolute; margin: 0; padding: 0;} .nav-list li a:hover li{float: left;} .nav-list li:hover li a{ background-color: #333; border-bottom: 1px solid #fff; color: #FFF;} <ul class="nav-list" id="navigation"><!--Menu list--> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li> <ul><a href="members.html">Members</a> <li><a href="board.html">Board of Directors</a></li> <li><a href="committee.html">Committee</a></li> </ul></li> <li><a href="join.html">Join Us</a></li> <li><a href="events.html">Events</a></li> <li><a href="rules.html">Rules &amp; Guidelines</a></li> <li><a href="archive.html">Archive</a></li> <li><a href="contact.html">Contact Us</a></li> <li><a href="#">Login</a></li> </ul><!--ENDS Menu list-->

    Read the article

  • jQuery animate slidding background image using mouse position wont stop... just keeps going

    - by simian
    I have a neat little jQuery script I am working on. Goal: parent div with overflow hidden holds a larger div with image. When I move the mouse to the left or right of the parent div, the div with image changes margin-left to move left or right. Problem is... if I move the mouse out of the parent div (left or right), the image keeps going. I need the image to stop when the mouse is not on the inside left or right edge of the parent div. Any ideas? <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> //<![CDATA[ jQuery.noConflict (); jQuery(document).ready(function(){ jQuery('#container').mousemove(function(e){ var parentWidth = jQuery('#container').width(); var parentWidthLeft = Math.round(.1 * jQuery('#container').width()); var parentWidthRight = Math.round(jQuery('#container').width() - parentWidthLeft); var parentHeight = jQuery('#container').height(); var parentOffset = jQuery('#container').offset(); var X = Math.round(e.pageX - parentOffset.left); var Y = Math.round(e.pageY - parentOffset.top); if (X<parentWidthLeft) { jQuery('#image').animate({'left': '-' + parentWidth }, 5000); } if (X>parentWidthRight) { jQuery('#image').animate({'left': parentWidth }, 5000); } if (X<=parentWidthRight && X>=parentWidthLeft) { jQuery('#image').stop(); } if (X<1) { jQuery('#image').stop(); } }); jQuery('#container').mouseleave(function(){ jQuery('#image').stop(); }); }); // ]]> </script> </head> <body> <div id="container" style="width: 500px; height: 500px; overflow: hidden; border: 10px solid #000; position: relative; margin: auto auto;"> <div id="image" style="position: absolute; left: 0; top: 0;"><img src="http://dump4free.com/imgdump/1/Carmen-Electra_1wallpaper1024x768.jpg" alt="" /></div> </div> </body> </html>

    Read the article

  • need help in positioning

    - by teki
    i am using "beassistance validation" for my form and using tooltip plugin and it work fine except that positioning. please have a look at this link and i upload my form to get an idea what i am talking about. what i want is: if my validation fails i want to display the message after the tooltip icon, but its displaying the message before the tooltip icon. please see here here is the .css i am using: validation .css #aspnetForm { width: 670px; } #aspnetForm label.error { margin-left: 10px; width: auto; display: inline; } form.cmxform { width: 50em; } em.error { background: url("Images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; } em.success { background: url("Images/checked.gif") no-repeat 0px 0px; padding-left: 16px; } form.cmxform label.error { margin-left: auto; width: 250px; } #aspnetForm label.error { background: url("Images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } #aspnetForm label.checked { background: url("Images/checked.gif") no-repeat 0px 0px; } em.error { color: black; } #warning { display: none; } <asp:Label runat="server" ID='Label8' >Start Date:</asp:Label> <asp:TextBox ID="txtStartDate" runat='server' ></asp:TextBox> <a style="cursor: hand" class="tooltip" title="Select the starting date of a visit, example 05/05/2010 (MM/DD/YYYY)!"> <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> <p> </p> <asp:Label runat="server" ID='Label9' >End Date:</asp:Label> <asp:TextBox ID="txtEndDate" runat='server' ></asp:TextBox> <a style="cursor: hand" class="tooltip" title="Select the end date of a visit, example 05/06/2010 (MM/DD/YYYY)!"> <img alt="" src="Scripts/JQuery/Tooltip/icon_tooltip.gif" style="width: 11px; height: 11px" /></a> tooltip.css #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:2px 5px; color:#333; display:none; }

    Read the article

  • ModalPopupExtender with thmbnail (problem in javascript)

    - by arny
    this is the code,it is not working in Firefox,Chrome,to show full size image unless user click on image for couple of times, I basically replace the thmbnail image with full size image in javascript, here is my code, TransitionDuration="50" FramesPerSecond="40" RequireOpenedPane="false" SelectedIndex="-1" SuppressHeaderPostbacks="true" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" OnItemDataBound="Accordion1_ItemDataBound" OnItemCommand="Accordion1_ItemCommand" ' ' Width="90px" Height="70px" onclick="togglePopupImage2(this);" CssClass="thumbnail" BorderColor="Navy" BorderStyle="Solid" BorderWidth="1" <table> <tr> <td style="background-color: #2E4d7B; height: 15px; color: White; font: arial bold 12px; padding: 5px"> <label id="imgText" runat="server"> </label> </td> </tr> <tr> <td> <asp:Image ID="imgPopup" CssClass="imgpopup" runat="server" /> </td> </tr> <tr> <td align="center" style="background-color: #2E4d7B; height: 25px;"> <asp:Button ID="btnCancel" runat="server" Text="Close" CssClass="closeimage"/> </td> </tr> </table> </asp:Panel> And javascript code: function togglePopupImage2(thumbnail2) { var imageurl = thumbnail2.src; var temp = new Array(); temp = imageurl.split('.'); var imagepopup = temp[0].substring(0, temp[0].length - 3) + "." + temp[1]; var img = new Image(); img.src = imagepopup; $get('ctl00_MainContentCPH_UserInterfaceID').style.visibility = 'visible'; $get('ctl00_MainContentCPH_imgPopup').src = img.src; //alert(img.src); if (img.width > 750) { if (screen.width == '1024' || screen.width == '800') { $get('ctl00_MainContentCPH_imgPopup').width = 550; //to show the picture in 1024 or 800 resolutions } else { $get('ctl00_MainContentCPH_imgPopup').width = 750; } } else { $get('ctl00_MainContentCPH_imgPopup').width = img.width; } if (img.height > 568) { if (screen.width == '1024' || screen.width == '800') { $get('ctl00_MainContentCPH_imgPopup').height = 350; //to show the picture in 1024 or 800 resolutions } else { $get('ctl00_MainContentCPH_imgPopup').height = 568; } } else { $get('ctl00_MainContentCPH_imgPopup').height = img.height; } // } } Please find the error and let me know what is the right way to achieve this? Thanks in advance

    Read the article

  • CSS 3 specials rounded corners in borders

    - by Ruben
    How can I realise this special corner in my border with CSS3 This is what I got now: http://jsfiddle.net/hashie5/nDv5k/ <aside> <h2>Product in de kijker</h2> <h3>Mobiele telefonie</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <a href="#" class="btn btn-runa">Ga verder</a> aside { border: 1px solid #CCCC00; border-radius: 10px; padding: 5px 20px 20px 20px; width: 290px; margin: 50px; } body { font-family:"Trebuchet MS"; color: #333333; background-color: #FFFFFF; font-size: 14px; line-height: 150%; } h1 { font-size: 30px; color: #1F668C; line-height: 120%; font-weight: normal; } h2 { font-size: 22px; color: #CCCC00; line-height: 120%; font-weight: normal; } h3 { font-size: 22px; color: #1E678E; line-height: 120%; font-weight: normal; } h4 { font-size: 20px; color: #1E668C; line-height: 120%; font-weight: normal; } h5 { font-size: 14px; color: #CCCC00; line-height: 120%; font-weight: bold; } .btn-runa { background: none; background-color: #CCCC00; color: #FFFFFF; text-shadow: none; }

    Read the article

  • AJAX Div Retrieval every 60 seconds

    - by Sam
    Hello everyone! What I would like to do is retrieve the contents of a PHP file and insert it into a div every 60 seconds, basically refreshing the dynamic div. I've come up with the following code so far, however it doesn't seem to be working. The code is just like this, nothing extra, apart from the MYSQL login. PHP to grab: <?php $time = date("m/d/Y h:i:s a", time()); mysql_query("UPDATE djs SET requesttime='{$time}' WHERE username='{$djs['username']}'") or die(mysql_error()); $request_db = mysql_query("SELECT * FROM requests WHERE haveplayed='0'") or die(mysql_error()); echo "<table style=\"border:1px solid;width:99%;margin-left:auto;margin-right:auto;\" border=\"1\">"; echo "<tr><th>Title</th><th>Artist</th><th>Dedicated To...</th></tr>"; while($request = mysql_fetch_array( $request_db )) { echo "<tr><td style=\"width:33%;padding:1px;\">"; echo $request['SongName']; echo "</td><td style=\"width:33%;\">"; echo $request['Artist']; echo "</td><td style=\"width:33%;\">"; echo $request['DedicatedTo']; echo "</td></tr>"; } echo "</table>"; ?> The original PHP code is just the same, enclosed in a div with an id attribute of 'ajax_table'. The JavaScript is: // JavaScript Document var xmlHttp_moniter function moniter() { xmlHttp_moniter = GetXmlHttpObject_parcel() if(xmlHttp_moniter == null) { alert("browser does not support HTTP Request") return } var url="ajax_table.php?random=" + Math.random() xmlHttp_moniter.onreadystatechange = stateChanged xmlHttp_moniter.open("GET",url,true) xmlHttp_moniter.send(null) } function stateChanged() { if(xmlHttp_moniter.readyState==4 || xmlHttp_moniter.readyState == "complete") { document.getElementById("ajax_table").innerHTML = xmlHttp_moniter.responseText setTimeout('ajax_table()',60000); } } function GetXmlHttpObject_parcel() { var xmlHttp_moniter=null; try { xmlHttp_moniter=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp_moniter=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp_moniter=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp_moniter; } and that is on the page that is requesting the other php page.

    Read the article

  • removeClass doesn't work on the second DIV tag

    - by kwokwai
    Hi all, I am learning JQuery and writing a simple data validation for the two fields in a HTML form: <FORM name="addpost" id="addpost" method="post" action="/add"> <TABLE BORDER=0 width="100%"> <TR> <TD>Topic</TD> <TD> <DIV ID="topic"> <INPUT type=text name="topic" id="topic" size="72" maxlength="108"/> </DIV> </TD> </TR> <TR> <TD>Comments</TD> <TD> <DIV ID="topiccontent"> <TEXTAREA rows="12" cols="48" name="content" ID="content"> </TEXTAREA> </DIV> </TD> </TR> <TR> <TD> <INPUT type="submit" value="Send"> </TD> </TR> </TABLE> </FORM> Here is the JQuery script for checking the data input from the form above: $('#addpost').submit(function(){ if($('#topic').val()==""){ $('#topic').addClass('hierror'); return false;} else{$('#topic').removeClass('hierror');} if($('#topiccontent').val()==""){ $('#topiccontent').addClass('hierror'); return false;} else{$('#topiccontent').removeClass('hierror');} }); Here is the CSS for the hierror class: .hierror{border-style:solid; border-width:12px; border-color:#FF0000;} ('#topic').removeClass('hierror') works but ('#topiccontent').removeClass('hierror') doesn't. Could you help me please?

    Read the article

  • IE is doing strange things with JQuery

    - by Syncopated
    So ... The thing is, the code works in FireFox, no problems. But when I open the same page, it gives me the following error: "Undefined is null or not an object." But when I copy the code to a localhost page, it works fine. Also when I clear my cache in IE it works, but only once, if I refresh after that one load, it gives me the same error. Here is the code: <script type="text/javascript" src="datepicker/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var count3 = 0; var count5 = 0; var count2 = 0; var count4 = 0; $(document).ready(function(){ $('#switch3').click(function(){ $('#switchDiv3').slideToggle(350); if(count3 == 0){ count3 = 1; document.getElementById('switchImage3').src = "images/ArrowDown.png"; return; } else { count3 = 0; document.getElementById('switchImage3').src = "images/ArrowRight.png"; return; } }); ... (this is the code for each item that is generated) </script> And the code that determines the div that should hide: <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="20" align="center" valign="top" style="padding-right: 3px"> <a style="cursor: pointer;" id="switch3"><img width="20" height="20" src="images/ArrowRight.png" id="switchImage3" style="border-style: solid; border-width: 1px; border-color: black;"/></a> </td> <td> <div id="switchDiv3"> <div align="left"> (Contents of the div here) </div> </div> </td> </tr> </table> Any help is appreciated! Thanks in advance

    Read the article

< Previous Page | 101 102 103 104 105 106 107 108 109 110 111 112  | Next Page >