Search Results

Search found 15970 results on 639 pages for 'absolute path'.

Page 175/639 | < Previous Page | 171 172 173 174 175 176 177 178 179 180 181 182  | Next Page >

  • How to keep relative position of WPF elements on background image

    - by Masterfu
    Hi folks, I am new to WPF, so the answer to the following question might be obvious, however it isn't to me. I need to display an image where users can set markers on (As an example: You might want to mark a person's face on a photograph with a rectangle), however the markers need to keep their relative position when scaling the image. Currently I am doing this by using a Canvas and setting an ImageBrush as Background. This displays the image and I can add elements like a Label (as replacement for a rectangle) on top of the image. But when I set a label like this, it's position is absolute and so when the underlying picture is scaled (because the user drags the window larger) the Label stays at it's absolute position (say, 100,100) instead of moving to the new position that keeps it "in sync" with the underlying image. To cut the matter short: When I set a marker on a person's eye, it shouldn't be on the person's ear after scaling the window. Any suggestions on how to do that in WPF? Maybe Canvas is the wrong approach in the first place? I could keep a collection of markers in code and recalculate their position every time the window gets resized, but I hope there is a way to let WPF do that work for me :-) I am interested in hearing your opinions on this. Thanks

    Read the article

  • Embed Youtube in UIWebView behind transparent img. Wmode transparent and z-index doesn't work

    - by Allisone
    I'm using this code: - (void)embedYouTube:(NSString *)urlString frame:(CGRect)frame { NSString *embedHTML = @"\ <html><head>\ <style type=\"text/css\">\ body {\ background-color: black;\ }\ #container{\ position: relative;\ z-index:1;\ }\ #video,#videoc{\ position:absolute;\ z-index: 1;\ border: none;\ }\ #tv{\ background: transparent url(tv.png) no-repeat;\ width: 320px;\ height: 205px;\ position: absolute;\ top: 0;\ z-index: 999;\ }\ </style>\ </head><body style=\"margin:0\">\ <div id=\"tv\"></div>\ <object id=\"videoc\" width=\"240\" height=\"160\">\ <param name=\"movie\" value=\"%@\"></param>\ <param name=\"wmode\" value=\"transparent\"></param>\ <embed wmode=\"transparent\" id=\"video\" src=\"%@\" type=\"application/x-shockwave-flash\" \ width=\"240\" height=\"160\"></embed>\ </object>\ </body></html>"; NSString *path = [[NSBundle mainBundle] bundlePath]; NSURL *baseURL = [NSURL fileURLWithPath:path]; NSString *html = [NSString stringWithFormat:embedHTML, urlString,urlString]; UIWebView *videoView = [[UIWebView alloc] initWithFrame:frame]; [videoView loadHTMLString:html baseURL:baseURL]; [self.view addSubview:videoView]; [videoView release]; } Its the first time that I use UIWebView and the first time that I use video in iPhone. The video plays, so that's working BUT: I want to have an old school tv (round corners) in foreground with switches and so on. The tv is an image with transparent pixels in the middle, so that a video lying behind the tv will shine through as if the video would be shown on the tv. But first of all the video has a border that I can't remove and second it's always in the foreground. In Safari and in Firefox and Mac it's working. So is it an iPhone thing, could it be that it simply won't work on iPhone ? Or do I have some css/html typos ?

    Read the article

  • Why does this code send the form input to the URL?

    - by marcamillion
    How do I get this form input to be stored in a variable, that I can then use later - rather than being appended to the end of the URL? <script type="text/javascript"> $(function() { var tag_box = $("<div>").appendTo("body").css({ "width": "40px", "height":"40px", "border":"4px solid #000000", "position":"absolute", "display":"none", "padding":"15px" }); var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"}); $("#image-wrapper").live("click", function(e) { tag_box.css({ "left": e.pageX - 40, "top": e.pageY - 40, "display": "block" }) .after(comment_box.css({ "left": e.pageX - 65, "top": e.pageY + 40 })); return false; }); }); </script> <body> <div align="center"> <img src="images/ror1.gif" width="760" height="182" alt="Ror1" id="image-wrapper"> </div> </body>

    Read the article

  • Input boxes with transparent background are not clickable in IE8

    - by Viliam
    I have an absolutely positioned input box in a form. The input box has transparent background: .form-page input[type="text"] { border: none; background-color: transparent; /* Other stuff: font-weight, font-size */ } Surprisingly, I cannot select this input box by clicking on it in IE8. It works perfectly in Firefox however. The same happens for background: none. When I change the background color: background-color: red; It works fine, so this is issue associated with transparent background. Setting a border makes the input box selectable by clicking on its border only. Is there a workaround to have clickable input box with transparent background working in IE8? Update: Example. Uncomment background-color and the inputbox is selectable. You can also click on the select box, and focus the input box by pressing Shift+Tab. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head></head><body> <style type="text/css"> input[type="text"] { border: none; background: transparent; /*background-color: blue;*/ } #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; } #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; } </style> <img src="xxx.png" alt="" width="1000" height="1000"> <input id="elem528" maxlength="7" type="text"> <select id="elem529"></select> </body></html>

    Read the article

  • java distributed cache for low latency, high availability

    - by Shahbaz
    I've never used distributed caches/DHTs like memcached, jboss cache, ehcache, etc. I'm wondering which, if any, is appropriate for my use. First, I'm not doing web applications (as most of these project seem to be geared towards web apps). I write servers (Order Management Systems actually) for financial trading firms. The servers themselves are not too complicated. They need to receive information (market data, orders, executions, etc.) rout them to their destination while possibly transforming some of these messages. I am looking at these products to solve the following problems: * Safe repository of the state of the server. I'd rather build the logic of my application as a bunch of transformers (similar to Apache Camel) and store the state in a 'safe' place * This repository should be distributed: in case one of these data stores crashes, one or two more should be up and I should be able to switch to them seamlessly * This repository should be fast. Single digits milliseconds count here, in other words, systems which consume/process this data are automated systems, not humans clicking on links. This system needs to have high-throughput and low latency. By sending my data outside the process, I am necessarily slowing performance, but I am trying to balance absolute raw speed and absolute protection of data. * This repository should be safe. Similar to the point about several on-line backups, this system needs to write data to disk (potentially more than one disk). I'd really like to stop writing my own 'transaction servers.' Am I correct to be looking into projects such as jboss cache, ehcache, etc.? Thanks

    Read the article

  • How do I log from inside my web application in Tomcat 6.

    - by Carlos
    How do I log from within my web application deployed on Tomcat 6? Where should I expect the logging output to go (internal tomcat log files, or will another logfile be generated)? I see a ton of documentation but am having a hard time finding a direct answer to the above questions. Where should I expect the logging to show up (currently it is log4j is not generating a log file and it is not showing up in my console). I am trying to follow http://www.laliluna.de/articles/log4j-tutorial.html . ### direct log messages to stdout ### log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target=System.out log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n ### file appender log4j.appender.file=org.apache.log4j.RollingFileAppender log4j.appender.file.maxFileSize=100KB log4j.appender.file.maxBackupIndex=5 log4j.appender.file.File=test.log log4j.appender.file.threshold=info log4j.appender.file.layout=org.apache.log4j.PatternLayout log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n log4j.rootLogger=debug, stdout In my application I define a log object: private static org.apache.log4j.Logger log = Logger.getLogger(MyClass.class); log.error("LOGGING!"); Thanks for the help.

    Read the article

  • How can a silverlight app download and play an mp3 file from a URL?

    - by Edward Tanguay
    I have a small Silverlight app which downloads all of the images and text it needs from a URL, like this: if (dataItem.Kind == DataItemKind.BitmapImage) { WebClient webClientBitmapImageLoader = new WebClient(); webClientBitmapImageLoader.OpenReadCompleted += new OpenReadCompletedEventHandler(webClientBitmapImageLoader_OpenReadCompleted); webClientBitmapImageLoader.OpenReadAsync(new Uri(dataItem.SourceUri, UriKind.Absolute), dataItem); } else if (dataItem.Kind == DataItemKind.TextFile) { WebClient webClientTextFileLoader = new WebClient(); webClientTextFileLoader.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClientTextFileLoader_DownloadStringCompleted); webClientTextFileLoader.DownloadStringAsync(new Uri(dataItem.SourceUri, UriKind.Absolute), dataItem); } and: void webClientBitmapImageLoader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e) { BitmapImage bitmapImage = new BitmapImage(); bitmapImage.SetSource(e.Result); DataItem dataItem = e.UserState as DataItem; CompleteItemLoadedProcess(dataItem, bitmapImage); } void webClientTextFileLoader_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { DataItem dataItem = e.UserState as DataItem; string textFileContent = e.Result.ForceWindowLineBreaks(); CompleteItemLoadedProcess(dataItem, textFileContent); } Each of the images and text files are then put in a dictionary so that the application has access to them at any time. This works well. Now I want to do the same with mp3 files, but all information I find on the web about playing mp3 files in Silverlight shows how to embed them in the .xap file, which I don't want to do since I wouldn't be able to download them dynamically as I do above. How can I download and play mp3 files in Silverlight like I download and show images and text?

    Read the article

  • Turning off hibernate logging console output

    - by Jared
    I'm using hibernate 3 and want to stop it from dumping all the startup messages to the console. I tried commenting out the stdout lines in log4j.properties but no luck. I've pasted my log file below. Also I'm using eclipse with the standard project structure and have a copy of log4j.properties in both the root of the project folder and the bin folder. ### direct log messages to stdout ### #log4j.appender.stdout=org.apache.log4j.ConsoleAppender #log4j.appender.stdout.Target=System.out #log4j.appender.stdout.layout=org.apache.log4j.PatternLayout #log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n ### direct messages to file hibernate.log ### log4j.appender.file=org.apache.log4j.FileAppender log4j.appender.file.File=hibernate.log log4j.appender.file.layout=org.apache.log4j.PatternLayout log4j.appender.file.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n ### set log levels - for more verbose logging change 'info' to 'debug' ### log4j.rootLogger=warn, stdout #log4j.logger.org.hibernate=info log4j.logger.org.hibernate=debug ### log HQL query parser activity #log4j.logger.org.hibernate.hql.ast.AST=debug ### log just the SQL #log4j.logger.org.hibernate.SQL=debug ### log JDBC bind parameters ### log4j.logger.org.hibernate.type=info #log4j.logger.org.hibernate.type=debug ### log schema export/update ### log4j.logger.org.hibernate.tool.hbm2ddl=debug ### log HQL parse trees #log4j.logger.org.hibernate.hql=debug ### log cache activity ### #log4j.logger.org.hibernate.cache=debug ### log transaction activity #log4j.logger.org.hibernate.transaction=debug ### log JDBC resource acquisition #log4j.logger.org.hibernate.jdbc=debug ### enable the following line if you want to track down connection ### ### leakages when using DriverManagerConnectionProvider ### #log4j.logger.org.hibernate.connection.DriverManagerConnectionProvider=trac5

    Read the article

  • using jquery in asp.net to hide div tag

    - by Eyla
    Greetings, I have asp.net check box control and asp.net dropdownlist control inside div tag. I want to hid the div when I check the box and unhide it when I unchecked the box. I tried few ways with jquery but I could not do it. Here is my code please look at it and tell me what is wrong with it. <%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> function ModifyOccup() { $('myOccup').removeClass('display1'); $('myOccup').removeClass('display1'); $('myOccup').removeClass('display'); $('myOccup').removeClass('display'); if ($('#<%=chkOccup.ClientID %>').is(':checked')) { $('myOccup').addClass('display1'); } else { $('myOccup').addClass('display'); } } </script> <asp:CheckBox ID="chkOccup" runat="server" Style="top: 1055px; left: 355px; position: absolute; height: 22px; width: 126px" Text="Check to modify" onclick=" ModifyOccup()"/> <div id ="myOccup" > <asp:DropDownList ID="cmbWorkField" runat="server" Style="top: 1090px; left: 350px; position: absolute; height: 22px; width: 126px"> </asp:DropDownList> </div> </asp:Content> ...................... Style.css File .......................... .display { display: none; } .display1 { display: inherit; }

    Read the article

  • dotnetopenauth with asp.net mvc proving too frustrating to use.

    - by Stacey
    I've been trying excessively hard to implement a good open id solution into asp.net mvc - and everywhere I turn is absolute dead ends. DotNetOpenAuth is just too big and I have been thusfar unable to get even the most simplistic, basic, absolute cut and dry implementation of it to work. NerdDinner had a promising implementation, but it is impossible to track down all of the dependant files and scripts. The DotNetOpenAuth website has virtually no information that helps, either, unfortunately. Does ANYONE know of a simple approach to just implementing this that actually explains and details how it is working with some kind of selector? It is talked about so much, but everything I find for it is so difficult to work with that it is really putting my whole team off from even considering it. We want to implement it similar to how stack overflow already does - using a selector that'll popup a login page if it needs to. I realize there is a lot of code that needs to be done for this, but everything just hails and praises dotnetopenauth, and nothing really teaches it. Even the sample projects do not open or compile. It looks like a wonderful library - but it really just isn't clicking for me.

    Read the article

  • Positioning one div to the right of another

    - by Jonno_FTW
    Hi I have the following html and css. But what I can't figure out is how to have the tabs div at the right of the main div. So that they stick out the right like bookmarks. .main { -moz-border-radius:10px; height: 75%; width: 60%; position: absolute; top: 15%; left: 20%; right: auto; } .tabs { width: 50px; height: 1.3em; position: absolute; float: right; } #tab { margin: 10px 10px 10px 0px;} And the html: <div class="main"> <div id="content"> Some main content </div> </div> <div class="tabs"> <div class="tabs" id="tab"> <a href="#" alt="Home"> Home </a> </div> <div class="tabs" id="tab"> <a href="#" alt="About"> About </a> </div>

    Read the article

  • Glassfish: Defining Custom JNDI Names for Session Beans

    - by Adeel Ansari
    Background: Want to use GF3 in development, where as actual SIT, UAT, and production is using WAS. Problem: With the remote session beans everything is good to go, as GF3 gives a non-standard JNDI name, which is same as what WAS suggests, i.e. an absolute class name. Now for the local session beans WAS use the same absolute class name but with the prefix, i.e. ejblocal:. Whereas GF3 doesn't give any non-standard JNDI name for local session beans. GF3 came up with only portable name, java:global/..I need to find a way so I can use the same names for both. I am using EJB 3.0, WAS 7.9, and Glassfish 3. Don't have any xml confiuration for ejbs. Using Spring to inject the bean in Struts2 actions. With remote interfaces both servers are okay and agreed on a single convention, but for locals they differ. Is there any solution for this? Or just sun-ejb-jar.xml will solve it? Thanks.

    Read the article

  • In Firefox 2, usage of overflow:hidden makes other divs overlap current div

    - by Shankar
    Hi, When I use overflow:hidden for div which is positioned absolute (for menu), other div overlaps. Here is the code. It works fine in FF3. Any help appreciated. Please note that html should be as it is. Also if you can provide solution, just by changing styles of menu div (the div which contains menu text) it is more helpful for me. Thanks in advance Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Title of the document</title> </head> <body> <div style="position:relative"> <div> <div style="height:20px;overflow:hidden"> <div style="position:absolute;width:200px;height:100px;top:0px;background-color:black;z-index:1">menu</div> </div> </div> <div style="position:relative;height:200px;background-color:gray;"></div> </div> </body> </html>

    Read the article

  • Django Template tag, generating template block tag

    - by Issy
    Hi Guys, Currently a bit stuck, wondering if anyone can assist. I am using django-adminfiles. Which is a near little application. I want to use it to insert images into posts/articles/pages for a site i am building. How django-adminfiles works is it inserts a placeholder i.e <<< ImageFile and this gets rendered using a django template. It also has the feature of inserting custom options i.e (Insert Medium Image) , i figured i would used this to automatically resize images and include it in the post (similar to how WP does it). Django-adminfiles makes use of sorl.thumbnail app to generate thumbnails. So i have tried testing generating thumbnails: The current template that is used to render the inserted image is: {% spaceless %} <img src="{{ upload.upload.url }}" width="{{ upload.width }}" height="{{ upload.height }}" class="{{ options.class }}" class="{{ options.size }}" alt="{% if options.alt %}{{ options.alt }}{% else %}{{ upload.title }}{% endif %}" /> {% endspaceless %} I tried modifying this to: {% load thumbnail %} {% spaceless %} <img src="{% thumbnail upload.upload.url 200x50 %}" width="{{ upload.width }}" height="{{ upload.height }}" class="{{ options.class }}" class="{{ options.size }}" alt="{% if options.alt %}{{ options.alt }}{% else %}{{ upload.title }}{% endif %}" /> {% endspaceless %} I get the error: Exception Value: Caught an exception while rendering: Source file: '/media/uploads/DSC_0014.jpg' does not exist. I figured the thumbnail needs the absolute path so tried putting that in the template, and that works. i.e this works: {% thumbnail '/Users/me/media/uploads/DSC_0014.jpg' 200x50 %} So basically i need to generate the absolute path to the file give the relative path (to web root). You could do this by passing the MEDIA_ROOT setting to the template, but the reason i want to do a template tag is to programmatically set the image size.

    Read the article

  • how to tile 3D mesh with image brush in XAML

    - by MC9000
    I have a 2D square in a ViewPort3D that I want to do a tiling of an image (like a checkerboard or flooring with "tiles" effect). I've created an image brush (the image is 50x50 pixels, the surface 250x550 pixels) and a viewport (trying to follow MS's site - though their example is for 2D), but only 1 of the colors in the "tile" image shows up and no tiling is seen. I can't find a single example on the Internet and MS's site has no info (that I can find) on 3D XAML anywhere, so I'm stumped as how to actually do this. <Viewport3D> <Viewport3D.Camera> <PerspectiveCamera Position="125,790,120" LookDirection="0,-.7,-0.25" UpDirection="0,0,1" /> </Viewport3D.Camera> <ModelVisual3D> <ModelVisual3D.Content> <Model3DGroup> <AmbientLight Color="white" /> <GeometryModel3D> <GeometryModel3D.Geometry> <MeshGeometry3D Positions="0,0,0 250,0,0 250,550,0 0,550,0 " TriangleIndices="0 1 3 1 2 3 "/> </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <ImageBrush ViewportUnits="Absolute" TileMode="Tile" ImageSource="testsquare.gif" Viewport="0,0,50,50" Stretch="None" ViewboxUnits="Absolute" /> </DiffuseMaterial.Brush> </DiffuseMaterial> </GeometryModel3D.Material> </GeometryModel3D> </Model3DGroup> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>

    Read the article

  • Jquery .hide problem

    - by Sergio
    I'm using jquery to show animated MSN like window at the bottom of the page. Jquery code: $(document).ready(function() { $(" .inner").stop().animate({height:'142px'},{queue:false, duration:600}); $(' .close').click(function(event) { $(' .inner').hide(); }); $(' .inner').click(function() { location.replace("somepage.php"); }); }); The CSS: .close {height:14px; z-index:100; position: absolute; margin-left:174px; margin-top:12px; border:1px solid #F00;} .inner {position:absolute;bottom:0;width:201px;height:117px;right: 0; margin-right:10px; float:left; z-index:-1; display:block; cursor:pointer;} The problem that I have with this code is that the close button (showing at the right top corner of .inner DIV) can't fire Jquery .hide function. Why?

    Read the article

  • IE 6 bug? width: 987

    - by William
    I'm having a very weird issue in IE6. If I set a div container do the width of 987px it adds a spacing between the container and an absolute positioned element inside. Any other width works fine, it's just 987. Is there something I'm not seeing? Code to reproduce: <!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" lang="en"> <head> <title>IE6 Issue</title> <style type="text/css"> body { background-color: #000; } #c1 { width: 987px; background-color: #fff; } #c2 { border: #f00 1px solid; zoom: 1; position: relative; } #tl, #tr { background-color: #000; font-size: 0; line-height: 0; position: absolute; top: 0px; left: 0px; width: 4px; height: 6px; } #tr { left: auto; right: 0; } </style> </head> <body> <div id="c1"><div id="c2"><div id="tl"></div><div id="tr"></div>a</div> </div> </body> This is crazy.

    Read the article

  • How to hide the outer scroll bar in IE?

    - by user198729
    Live demo: http://222.73.204.65:81/stumbleupon.html This works in firefox,but in IE there will be two scrollbars,making it ugly: <!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>Stumbleupon</title> </head> <style type="text/css"> div.webtoolbar { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(http://cdn.stumble-upon.com/i/toolbar/bgToolbar.gif) repeat-x scroll 0 0; border-top:1px solid #000000; height:33px; min-width:760px; overflow:hidden; position:absolute; top:0; width:100%; z-index:3; } </style> <body style="margin: 0pt; padding: 0pt; overflow: hidden; height: 100%;"> <iframe id="stumbleFrame" frameborder="0" noresize="noresize" src="http://www.livescience.com/animals/green-slug-animal-plant-100112.html" name="stumbleContent" style="position: absolute; background: transparent; width: 100%; height:100%; top: 0; padding: 32px 0; z-index: 1;"></iframe> <div class="webtoolbar">menus here</div> </body> </html>

    Read the article

  • Float a div in top right corner without overlapping sibling header

    - by Maxime R.
    Having a div and a h1 inside a section, how do i float the div in the top right corner without overlapping the text of the header ? The HTML code is the following: <section> <h1>some long long long long header, a whole line, 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6</h1> <div><button>button</button></div> </section> I tried an absolute position relative to the parent but the text is overlapped, http://jsfiddle.net/FnpS8/2/ Using this CSS code: section { position: relative; } h1 { display: inline; } div { position: absolute; top: 0; right: 0; } I tried floating the div to the right but it doesn't remain in the top right corner, http://jsfiddle.net/P6xCw/2/ Using this CSS code: h1 { display: inline; } div { float: right; } ? I know there is a lot of similar questions but I couldn't find one solving this case.

    Read the article

  • Horizontally and Vertically Center Modal Div IE Issue

    - by aherrick
    I'm trying to horizontally and vertically center a modal window inside a div. I want it to be cross browser compatible. You can see from the picture below that when I resize IE8 then click, "show modal" button it displays not exactly horizontally centered. This does not seem to be an issue with Chrome. Any thoughts? How would you guys accomplish this? <html> <head> <title>test</title> <style type="text/css"> * { margin: 0px; padding: 0px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('#modal').click(function() { // overlay $('<div id="overlay" />').css({ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'black', opacity: 0 }).appendTo('body'); $('<div id="datamodal" />').css({ backgroundColor: '#FFFFFF', border: '10px solid #999', height: '200px', width: '600px', position: 'absolute', top: '50%', left: '50%', marginTop: '-120px', marginLeft: '-320px', color: '#111111', fontWeight: 'bold', padding: '10px', display: 'none' }).append('<input type="text" />').appendTo('#overlay'); $('#overlay').fadeTo(300, 0.7); $('#datamodal').fadeIn(300); }); }); </script> </head> <body> <input id="modal" type="button" value="show modal" /> </body> </html>

    Read the article

  • How can I get the data from an ajax request to appear inside a div?

    - by Aaron Brokmeier
    I am unable to get the data from my ajax request to appear inside <div class="l_p_i_c_w"></div>. What am I doing wrong? I know the function inside my_file.php works, because if I refresh the page, then the data shows up where it should. jQuery: $.ajax({ type: "POST", url: "my_file.php", dataType: 'html', success: function(data){ $('div#myID div.l_p_c div.l_p_i_c_w').prepend(data); } }); HTML: <div class="l_p_w" id="myID"> <div class="l_p_c"> <div class="l_p_i_c_w"> <!-- stuff, or may be empty. This is where I want my ajax data placed. --> </div> </div> </div> CSS: .l_p_w { width:740px; min-height:250px; margin:0 auto; position:relative; margin-bottom:10px; } .l_p_c { position:absolute; bottom:10px; right:10px; width:370px; top:60px; } .l_p_i_c_w { position:absolute; left:5px; top:5px; bottom:5px; right:5px; overflow-x:hidden; overflow-y:auto; }

    Read the article

  • Positioning DIV's with Javascript

    - by Andrew P.
    I have two divs that I need to position horizontally dependent on the width of the user's screen. I've styled their vertical position in CSS, and I am trying to position them horizontally using Javascript. My divs: <div id="tl"> blah blah </div> <div id="bl"> blah blah </div> My CSS: #tl { position: absolute; top: -14px; right: 0; } #bl { position: absolute; bottom: 1px; right: 0; } My Javascript: var tl = document.getElementById('tl'); var bl = document.getElementById('bl'); var wide = parseInt(screen.width); var nudge = wide*.86; nudge = nudge+21; tl = tl.style; tl.right = ( parseInt(tl.right) + nudge ); bl = bl.style; bl.right = ( parseInt(bl.right) + nudge ); However... nothing happens. No errors, and definitely no movement from my divs. What am I doing wrong? Can anyone help?

    Read the article

  • Execute less compiler anywhere on the computer

    - by Xenioz
    I'm having a little problem with executing *.cmd files so I can execute them anywhere on the computer with cmd. What I exactly want is to execute the less.cmd file, which support optional arguments and uses lessc.wsf (Less.js compiler for Windows Script Host) for converting less css to pure css. The less.cmd contains: ::For convenience @cscript //nologo "%~dp0lessc.wsf" %* What I've done so far: added absolute path to lessc.cmd to the PATH system variable and moved .cmd in the PATHTEXT system variable to the beginning. Also did this: From a command prompt; assoc .bat should return with ..bat=batfile If not assoc .bat=batfile to restore the default file type association. ftype batfile should return with batfile="%1" %* If not ftype batfile="%1" %* to restore the default "Open" action for the file type. This still doesn't work unless I approach the cmd file with a absolute path in cmd, if I enter lessc anywhere else then I get C:\Intel Intel is not recognized as an internal or external command, operable program or batch file. , I've restarted my computer more than once to be sure changes will take effect. I hope somebody has the answer.

    Read the article

  • How do I add a comment to an image using jQuery

    - by marcamillion
    So I am trying to replicate Facebook's picture tagging functionality, and I have the functionality that onClick, a box is created and there is a comment box. Now the issue is that I want to be able to (without doing any back-end processing) take the input from the input field and add it in some form to the underlying image area that they have selected. I would also like to add a small image to that area, that shows that a comment is there. How do I do that? See the code below for what I have for the comment box: <script type="text/javascript"> $(function() { var tag_box = $("<div>").appendTo("body").css({ "width": "40px", "height":"40px", "border":"4px solid #000000", "position":"absolute", "display":"none", "padding":"15px" }); var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"}); $("#image-wrapper").live('click', function(e){ tag_box.css({ "left": e.pageX - 40, "top": e.pageY - 40, "display": "block" }) .after(comment_box.css({ "left": e.pageX - 65, "top": e.pageY + 40 })); }); }); </script> Now...whenever the user presses enter, the info in the comment box is appended to the URL like so: .html?comment=comment value# Thanks

    Read the article

  • scrolling and css align with "right: 0px"

    - by Gabi
    Hello, In an HTML page, if I align some <div>s with "right: 0px", they all look very nice, as I expect. However, if I make the browser window smaller and the horizontal scroll bar appears, when I scroll the page to the right, I see an unexpected white space (instead of the background colors of my <div>s). It seems that my <div>s are aligned relative to the visible area of the page. See the sample code below: <html> <head> <style> <!-- #parent { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: yellow; } #child { position: absolute; left: 100px; top: 300px; width: 1000px; height: 400px; background-color: blue; } --> </style> </head> <body> <div id="parent"><div id="child">some text here</div></div> </body> </html> Is there any way to make the "right: 0px" property align the controls relative to the size of the entire page, not only the visible area? Thanks.

    Read the article

< Previous Page | 171 172 173 174 175 176 177 178 179 180 181 182  | Next Page >