Search Results

Search found 7598 results on 304 pages for 'mouse cursor'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 291/304 | < Previous Page | 287 288 289 290 291 292 293 294 295 296 297 298  | Next Page >

  • Is there any "modern" text editor with command-line/minibuffer?

    - by Pedro Morte Rolo
    A command line in a text editor is a wonderful feature. It allows the user to explore the editor's functionality and learn it's shortcuts in a textual way. It's much faster than using the mouse, and it is much easier to memorise "shortcuts" this way. Emacs and VI provide this, though, emacs and vi are not "modern". By "modern", I mean one that is original built to cope with the modern de-facto standards of selecting, copying, pasting, cutting, undoing, redoing and auto-completing. Cream/vi or Emacs/CUA are not valid options, since there are loads of things built over them that conflict with the mentioned stuff. It would be nice if there was an editor that would cope with the modern de-facto standards out-off-the-box, but still provide a command-line/minibuffer to perform/explore the commands and learn its shortcuts. Is there such a thing? I do not intend to use the "modern" term as derrogatory. I love both Emacs and VI, but I hate their keyboard-shortcut historical baggage. When I reffer to de-facto standards, I am not talking about Windows vs Whatever. Kate, gedit, Eclipse, Intelij or Textmate also follow the norm I am talking about and are not Windows editors. Please do not advertise Vim and Emacs, that's not answering the question. I am asking for alternatives. Why don't I like emacs and vi: Emacs: Despite CUA mode, emacs has loads of modes that conflict with this (e.g. slime, ruby-mode, etc...) It would be nice to have something that would work out-off-the-box. VI: I do not like that it is Visual/Insert-based. I do not know how to browse the text-editor's commands. I do not like that it is so much tought for the terminal. I believe that it has the same problem that I mentioned for emacs. This question is starting to look like requirement analysis.. As de-facto standards I mean: Ctrol-XCV for cut-copy-paste Ctrol-A for select-all Contrl-Z for Undo Ctrol-Y for Redo Control-F for Searching Contrl-Space for auto-complete Shift-arrow for selection Control-arrow for word-navigation Alt-Arrow for moving

    Read the article

  • Trouble displaying an object in WPF

    - by Scott
    I'm so new to this that I can't even phrase the question right... Anyway, I'm trying to do something very simple and have been unable to figure it out. I have the following class: public class Day : Control, INotifyPropertyChanged { public static readonly DependencyProperty DateProperty = DependencyProperty.Register("Date", typeof(int), typeof(Day)); public int Date { get { return (int)GetValue(DateProperty); } set { SetValue(DateProperty, value); if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("Date")); } } } public static readonly DependencyProperty DayNameProperty = DependencyProperty.Register("DayName", typeof(String), typeof(Day)); public String DayName { get { return (String)GetValue(DayNameProperty); } set { SetValue(DayNameProperty, value); if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("DayName")); } } } static Day() { DefaultStyleKeyProperty.OverrideMetadata(typeof(Day), new FrameworkPropertyMetadata(typeof(Day))); } #region INotifyPropertyChanged Members public event PropertyChangedEventHandler PropertyChanged; #endregion } I've learned that you can't call a constructor that has parameters in XAML so the only way to actually set some data for this class is through the two properties, DayName and Date. I created a ControlTemplate for Day which is as follows: <Style TargetType="{x:Type con:Day}"> <Setter Property="MinHeight" Value="20"/> <Setter Property="MinWidth" Value="80"/> <Setter Property="Height" Value="20"/> <Setter Property="Width" Value="80"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type con:Day}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Rectangle Grid.ColumnSpan="2" x:Name="rectHasEntry" Fill="WhiteSmoke"/> <TextBlock Grid.Column="0" x:Name="textBlockDayName" Text="{TemplateBinding DayName}" FontFamily="Junction" FontSize="11" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,2,0,0"/> <TextBlock Grid.Column="1" x:Name="textBlockDate" Text="{TemplateBinding Date}" FontFamily="Junction" FontSize="11" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,2,0,0"/> <Rectangle Grid.ColumnSpan="2" x:Name="rectMouseOver" Fill="#A2C0DA" Opacity="0" Style="{StaticResource DayRectangleMouseOverStyle}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> I then render it on screen in my MainWindow thusly: <Window x:Class="WPFControlLibrary.TestHarness.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:con="clr-namespace:WPFControlLibrary.Calendar;assembly=WPFControlLibrary" Title="MainWindow" Height="500" Width="525" WindowStartupLocation="CenterScreen"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="80"/> </Grid.ColumnDefinitions> <con:Day Grid.Column="1" Height="20" Width="80" DayName="Mon" Date="1"/> </Grid> And what I actually see is, well, nothing. If I put my cursor on the con:Day line of the XAML it'll highlight the correctly sized rectangle in the window but I don't see "Mon" on the left side of the rectangle and "1" on the right. What am I doing wrong? I suspect it's something simple but I'll be darned if I'm seeing it. My ultimate goal is to group a bunch of the Day controls within a Month control, which is then contained in a Year control as I'm trying to make a long Calendar Bar that lets you navigate through the months and years, while clicking on a Day would display any information saved on that date. But I can't even get the Day part to display independent of anything else so I'm a long way from the rest of the functionality. Any help would be greatly appreciated.

    Read the article

  • Wait 300ms and then slide down menu using jQuery

    - by Derfder
    I tried this js code: <script type="text/javascript"> $(document).ready( function() { var timer; $('.top-menu-first-ul li').hover(function(){ if(timer) { clearTimeout(timer); timer = null } timer = setTimeout(function() { $(this).find('ul').slideToggle(100); }, 500) }, // mouse out }); }); </script> with this html: <ul class="top-menu-first-ul"> <li> <a href="http://google.com">Google</a> <ul class="top-menu-second-ul"> <li><a href="http://translate.google.com">Google Translate</a></li> <li><a href="http://images.google.com">Google Images</a></li> <li><a href="http://gmail.google.com">Gmail</a></li> <li><a href="http://plus.google.com">Google Plus</a></li> </ul> </li> <li> <a href="http://facebook.com">Facebook</a> </li> <li> <a href="http://twitter.com">Twitter</a> </li> </ul> but it is not working. I would like to show the submenu when hovering over e.g. Google link and other will appear after 300ms. So, I need to prevent loading submenu when the user just quickly hover over it and not stay on hover link for at least 300ms. Then I need to stop executing code (or slide up) when he leaves the link. Because if he go over and back and over and back a copule of times he stop doing hovering anfd the code is still executing itself how many times he had hover over the link. I need somehow prevent this to happen. EDIT: I need to solve this without plugins like hoverIntent etc. if possible, just plain javascript and jQuery

    Read the article

  • Annoying Captcha >> How to programm a form that can SMELL difference between human and robot?

    - by Sam
    Hi folks. On the comment of my old form needing a CAPTHA, I felt I share my problem, perhaps you recognize it and find its time we had better solutions: FACTUAL PROBLEM I know most of my clients (typical age= 40~60) hate CAPTCHA things. Now, I myself always feel like a robot, when I have to sueeze my eyes and fill in the strange letters from the Capcha... Sometimes I fail! Go back etc. Turnoff. I mean comon its 2011, shouldnt the forms have better A.I. by now? MY NEW IDEA (please dont laugh) Ive thought about it and this is my idea's to tell difference between human and robot: My idea is to give credibility points. 100 points = human 0% = robot. require real human mouse movements require mousemovements that dont follow any mathematical pattern require non-instantaneous reading delays, between load and first input in form when typing in form, delays are measured between letters and words approve as human when typical human behaviour measured (deleting, rephrasing etc) dont allow instant pasting or all fields give points for real keyboard pressures retract points for credibility when hyperlinks in form Test wether fake email field (invisible by human) is populated (suggested by Tomalak) when more than 75% human cretibility, allow to be sent without captcha when less than 25% human crecibility, force captcha puzzle to be sure Could we write a A.I. PHP that replaces the human-annoying capthas, meanwhile stopping most spamservers filing in the data? Not only for the fun of it, but also actually to provide a 99% better alternative than CAPTHCA's. Imagine the userfriendlyness of your forms! Your site distinguishing itself from others, showing your audience your sites KNOWS the difference between a robot and a human. Imagine the advangage. I am trying to capture the essense of that distinguishing edge. PROGRAMMING QUESTION: 1) Are such things possible to programm? 2) If so how would you start such programm? 3) Are there already very good working solutions available elsewhere? 4) If it isn't so hard, your are welcome to share your answer/solutions below. 5) upon completion of hints and new ideas, could this page be the start of a new AI captcha, OR should I forget about it and just go with the flow, forget about the whole AI dream, and use captcha like everyone else.

    Read the article

  • Advice for Architecture Design Logic for software application

    - by Prasad
    Hi, I have a framework of basic to complex set of objects/classes (C++) running into around 500. With some rules and regulations - all these objects can communicate with each other and hence can cover most of the common queries in the domain. My Dream: I want to provide these objects as icons/glyphs (as I learnt recently) on a workspace. All these objects can be dragged/dropped into the workspace. They have to communicate only through their methods(interface) and in addition to few iterative and conditional statements. All these objects are arranged finally to execute a protocol/workflow/dataflow/process. After drawing the flow, the user clicks the Execute/run button. All the user interaction should be multi-touch enabled. The best way to show my dream is : Jeff Han's Multitouch Video. consider Jeff is playing with my objects instead of the google maps. :-) it should be like playing a jigsaw puzzle. Objective: how can I achieve the following while working on this final product: a) the development should be flexible to enable provision for web services b) the development should enable easy web application development c) The development should enable client-server architecture - d) further it should also enable mouse based drag/drop desktop application like Adobe programs etc. I mean to say: I want to economize on investments. Now I list my efforts till now in design : a) Created an Editor (VB) where the user writes (manually) the object / class code b) On Run/Execute, the code is copied into a main() function and passed to interpreter. c) Catch the output and show it in the console. The interpreter can be separated to become a server and the Editor can become the client. This needs lot of standard client-server architecture work. But some how I am not comfortable in the tightness of this system. Without interpreter is there much faster and better embeddable solution to this? - other than writing a special compiler for these objects. Recently learned about AXIS-C++ can help me - looks like - a friend suggested. Is that the way to go ? Here are my questions: (pl. consider me a self taught programmer and NOT my domain) a) From the stage of C++ objects to multi-touch product, how can I make sure I will develop the parallel product/service models as well.? What should be architecture aspects I should consider ? b) What technologies are best suited for this? c) If I am thinking of moving to Cloud Computing, how difficult/ how redundant / how unnecessary my efforts will be ? d) How much time in months would it take to get the first beta ? I take the liberty to ask if any of the experts here are interested in this project, please email me: [email protected] Thank you for any help. Looking forward.

    Read the article

  • How do you implement position-sensitive zooming inside a JScrollPane?

    - by tucuxi
    I am trying to implement position-sensitive zooming inside a JScrollPane. The JScrollPane contains a component with a customized 'paint' that will draw itself inside whatever space it is allocated - so zooming is as easy as using a MouseWheelListener that resizes the inner component as required. But I also want zooming into (or out of) a point to keep that point as central as possible within the resulting zoomed-in (or -out) view (this is what I refer to as 'position-sensitive' zooming), similar to how zooming works in google maps. I am sure this has been done many times before - does anybody know the "right" way to do it under Java Swing?. Would it be better to play with Graphic2D's transformations instead of using JScrollPanes? Sample code follows: package test; import java.awt.*; import java.awt.event.*; import java.awt.geom.*; import javax.swing.*; public class FPanel extends javax.swing.JPanel { private Dimension preferredSize = new Dimension(400, 400); private Rectangle2D[] rects = new Rectangle2D[50]; public static void main(String[] args) { JFrame jf = new JFrame("test"); jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); jf.setSize(400, 400); jf.add(new JScrollPane(new FPanel())); jf.setVisible(true); } public FPanel() { // generate rectangles with pseudo-random coords for (int i=0; i<rects.length; i++) { rects[i] = new Rectangle2D.Double( Math.random()*.8, Math.random()*.8, Math.random()*.2, Math.random()*.2); } // mouse listener to detect scrollwheel events addMouseWheelListener(new MouseWheelListener() { public void mouseWheelMoved(MouseWheelEvent e) { updatePreferredSize(e.getWheelRotation(), e.getPoint()); } }); } private void updatePreferredSize(int n, Point p) { double d = (double) n * 1.08; d = (n > 0) ? 1 / d : -d; int w = (int) (getWidth() * d); int h = (int) (getHeight() * d); preferredSize.setSize(w, h); getParent().doLayout(); // Question: how do I keep 'p' centered in the resulting view? } public Dimension getPreferredSize() { return preferredSize; } private Rectangle2D r = new Rectangle2D.Float(); public void paint(Graphics g) { super.paint(g); g.setColor(Color.red); int w = getWidth(); int h = getHeight(); for (Rectangle2D rect : rects) { r.setRect(rect.getX() * w, rect.getY() * h, rect.getWidth() * w, rect.getHeight() * h); ((Graphics2D)g).draw(r); } } }

    Read the article

  • jQuery sortable Div's

    - by kai lange
    is it possible to sort direct between two or more div's/boxe's and return the complete data (var order = ...) ? Online Demo: http://jsbin.com/alegu4 <!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>jQuery Dynamic Drag'n Drop</title> <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 10px; } ul { margin: 0; } #s1,#s2 { float: left; width: 400px; } #s1 li,#s2 li { list-style: none; margin: 0 0 4px 0; padding: 10px; background-color:#00CCCC; border: #CCCCCC solid 1px; color:#fff; } </style> <script type="text/javascript"> $(document).ready(function(){ $(function() { $("#s1 ul,#s2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; //$.post("updateDB.php", order); alert(order); } }); }); }); </script> </head> <body> <div id="box"> <div class="box" id="s1"> <ul> <li id="recordsArray_1">1. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_2">2. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_3">3. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_4">4. Lorem ipsum dolor sit amet, consetetur</li> </ul> </div> <div class="box" id="s2"> <ul> <li id="recordsArray_5">5. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_6">6. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_7">7. Lorem ipsum dolor sit amet, consetetur</li> <li id="recordsArray_8">8. Lorem ipsum dolor sit amet, consetetur</li> </ul> </div> </div> </body> </html> Please note it's not the same like my other post - thanks!

    Read the article

  • Menu Control in Master Page fails to use CSS styles

    - by Shaun
    I'm working on a web application that uses ASP.NET 3.5 and C#. Structurally, I have a master page with a menu control on it. The control serves as my navigation, and it gets its items from a SiteMapDataSource control and a corresponding Web.sitemap file. The problem is that some styles do not render properly when you specify the CssClass property. More specifically, the selected and hover styles don't respond to css styles. Consider the code below: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>A webpage</title> </head> <body> <form id="form1" runat="server"> <div id="page"> <asp:Menu ID="navMenu" Orientation="Horizontal" StaticMenuStyle-CssClass="staticMenu" StaticMenuItemStyle-CssClass="staticMenuItem" StaticSelectedStyle-CssClass="staticSelectedItem" StaticHoverStyle-CssClass="staticHoverItem" runat="server"> </asp:Menu> <asp:SiteMapDataSource ID="srcSiteMap" runat="server" ShowStartingNode="false" /> <br /> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> Suppose I had a corresponding .css file with the following: .staticMenuItem { background-color:Red; } .staticSelectedItem { background-color:Green; } .staticHoverItem { background-color:Blue; } What will happen is that my item backgrounds will properly be red, but my selected item will not be green and the item I'm hovering my mouse over will not be blue. This seems true regardless of whether or not I include the style in the head of the master page or in an external file in default theme as specified in the web.config file. If I specify the styles in the asp.net xml like so: <asp:Menu ID="navMenu" Orientation="Horizontal" runat="server"> <StaticSelectedStyle BackColor="Green" Font-Underline="True" Font-Bold="True" /> <StaticHoverStyle BackColor="Gray" /> </asp:Menu> It appears to work properly in Firefox, but the style is never embedded in the html in Internet Explorer. Odd. Does anybody have any insight into what is causing this problem and how to neatly work around it? I'm aware I might be able to programmically determine the current page and select the corresponding menu item manually so it receives the proper style class, but before I resort to hacking C# and Javascript together to fix this functionality, I'm open to ideas.

    Read the article

  • Slide div inside another div effect

    - by mariki
    I am trying to create sliding images effect: Online demolink text. The problem is when you click rapidly and randomly on the buttons and not wait for animation to finish causing unpredicted results and even stopping the functionality to work. (and once it stopped in the middle of 2 images...) How Can I make it work without bugs? I know that there are some other tools for that sliding like jquery and other approaches like changing the position attribute and not the scrollLeft attribute. But I want to do it as it is, with scrollLeft, if it possible of course. The Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> body { padding:0px; margin:0px; } #imageContainer { width: 500px; position: relative; } #div { overflow: hidden; white-space: nowrap; } #div img { cursor: pointer; vertical-align: bottom; width: 500px; padding:0px; margin:0px; display:inline; } </style> <script type="text/javascript"> var scrollIntervalID; var currentIndex=0; function Scroll(ind){ var dir = ind ==currentIndex?0:ind<currentIndex?-1:1; var steps = Math.abs(ind-currentIndex); scrollIntervalID = setInterval(function(){ var i=(steps*10)-1; return function(){ if (i <= 0) clearInterval(scrollIntervalID); var elm = document.getElementById("div"); elm.scrollLeft +=dir * 50; i--; document.getElementById("span").innerHTML=elm.scrollLeft; } }(), 15); currentIndex=ind; } </script> </head> <body> <div id="imageContainer"> <div id="div"> <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/> </div> </div> <div> <input type="button" value="1" onclick="Scroll(0);"/> <input type="button" value="2" onclick="Scroll(1);"/> <input type="button" value="3" onclick="Scroll(2);"/> <input type="button" value="4" onclick="Scroll(3);"/> </div> <span id="span"></span> </body> </html>

    Read the article

  • CSS Rollovers: how to maintain "hit area" size when hidden image is larger than anchor area

    - by nukefusion
    I have a small problem and I don't think what I want to do can be achieved with just pure CSS, but I figured I'd ask anyway. Basically, I have one DIV which contains a hyperlinked element that is smaller in size to it's parent DIV. So in effect I have a square within a square with the inner square being the "hit area". When I mouse over this inner square I want the background of the outer square to change. I know it's not possible to change the parent DIV's background on a:hover, but I figured I could give the illusion of it happening by nesting a hidden image inside the anchor. This works great until I want to "roll off". The problem is that I want the image to disappear when I leave the area of the anchor tag, not the larger hidden image. Is this possible? For the benefit of everyone I've provided an example to demonstrate what I mean: <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Test Rollover</title> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="d1"> <a href="#nogo"> <b id="b1"></b> <b id="b2"></b> </a> </div> </body> And the css: #b1 { width: 200px; height: 200px; top: 100px; left: 100px; background-color:aqua; position: absolute; z-index: 100; } #b2 { width: 400px; height: 400px; background-color:lime; position: absolute; display: none; z-index: 90; } #d1 { width: 400px; height: 400px; background-color:fuchsia; position: relative; } #d1 a:hover #b2 { display: block; } In this example I want the green outer square to disappear when I leave the bounds of the hidden inner blue square.

    Read the article

  • Placing a window near the system tray

    - by user227990
    I am writing a program that needs to set a window just above/below the traybar for gtk. I have tried using the 2 approaches that failed. One was using the gtk_status_icon_position_menu function and placing the window in the point where the user clicks (in the tray bar). The problem is that these solutions work in gnome(Linux) but not in Windows. In Linux they work because the window manager doesn't seem to allow placement of windows in the tray panel, honoring the closest possible. In Windows this doesn't happen and the window can go "out" of the screen which understandably is not desired. With this said i went out for a work around. My idea was to set the window in the location of mouse click and get the x and y coordinates of a normal window placement and with it's size check if it would be within the screen boundaries. If it was not make the correction. I have came up with the functions needed but for some reason the gdk_drawable_get_size(window-window ,&WindowWidth, &WindowHeight) and other similar functions only give the correct size value after the second run of the signal function. The result of the first run is just 1 to both size and width. (I have read the issue of X11 not giving correct results, but i think this is not it) event_button = (GdkEventButton *) event; if (event_button->button == 1) { if (active == 0) { gboolean dummy; gint WindowHeight, WindowWidth, WindowPosition[2]; GdkScreen *screen; gint ScreenHeight, ScreenWidth; dummy = FALSE; gtk_widget_show_all(window); gtk_window_present(GTK_WINDOW(window)); gtk_status_icon_position_menu(menu, &pos[X], &pos[Y], &dummy, statusicon); gtk_window_move(GTK_WINDOW(window), pos[X],pos[Y]); gdk_drawable_get_size(window->window ,&WindowWidth, &WindowHeight); screen = gtk_status_icon_get_screen(statusicon); ScreenWidth = gdk_screen_get_width(screen); ScreenHeight = gdk_screen_get_height(screen); g_print("Screen: %d, %d\nGeometry: %d, %d\n",ScreenWidth, ScreenHeight, WindowWidth, window->allocation.height); gtk_entry_set_text(GTK_ENTRY(entry),""); active = 1; return TRUE; } How can i do what i want in a portable way?

    Read the article

  • Insert text into a div from a poput form and rewrite the inserted text with javascript

    - by kuswantin
    So I read some related questions here before I asked, but can't find the answer to my problem. Hope some javascript master here can find this and bring the light to me. I created another button for nicEdit, a video button and wanted to insert some formatted text into the editor DIV (note: nicEdit has inline DIV, no iframe, no textarea). This is my button, recreated from the image button: var nicVideoOptions = { buttons : { 'video' : {name : __('Insert Video'), type : 'nicEditorVideoButton'} //, tags : ['VIDEO:'] }, iconFiles : {'video' : '../movie.png'} }; var nicEditorVideoButton = nicEditorAdvancedButton.extend({ addPane : function() { this.vi = this.ne.selectedInstance.selElm().parentTag('A'); this.addForm({ '' : {type : 'title', txt : 'Insert Video URL'}, 'href' : {type : 'text', txt : 'URL', 'value' : 'http://', style : {width: '150px'}} },this.vi); }, submit : function(e) { var vidVal = this.inputs['href'].value; if(vidVal == "" || vidVal == "http://") { alert("Enter the video url"); return false; } this.removePane(); if(!this.vi) { var tmp = 'javascript:nicVidTemp();'; this.ne.nicCommand("insertVideo",tmp); // still nothing works //this.vi = this.findElm('VIDEO:','href',tmp); //this.vi = this.setContent('[video:' + this.inputs['href'].value + ']'); //nicEditors.findEditor('edit-comment').setContent('<strong>Some HTML</strong> here'); //this.vi = this.setContent('<strong>Some HTML</strong> here'); insertAtCaret(this.ne.selectedInstance, vidVal); } if(this.vi) { // still nothing works //this.vi.setAttributes({ //vidVal : this.inputs['href'].value //}); //this.vi = this.setContent('[video:' + this.inputs['href'].value + ']'); //this.vi = this.setContent('<strong>Some HTML</strong> here'); } } }); nicEditors.registerPlugin(nicPlugin,nicVideoOptions); The button is there, the form poput like the image button, so it's okay. But can't insert the text into the DIV. The final output will be taken from this: ('[video:' + this.inputs['href'].value + ']') and displayed in the editor DIV as is: [video:http//some.com/video-url] As you see, I am blindly touching everything :) And this insertion is taken from: http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/ function insertAtCaret(areaId,text) { var txtarea = document.getElementById(areaId); var scrollPos = txtarea.scrollTop; var strPos = 0; var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); strPos = range.text.length; } else if (br == "ff") strPos = txtarea.selectionStart; var front = (txtarea.value).substring(0,strPos); var back = (txtarea.value).substring(strPos,txtarea.value.length); txtarea.value=front+text+back; strPos = strPos + text.length; if (br == "ie") { txtarea.focus(); var range = document.selection.createRange(); range.moveStart ('character', -txtarea.value.length); range.moveStart ('character', strPos); range.moveEnd ('character', 0); range.select(); } else if (br == "ff") { txtarea.selectionStart = strPos; txtarea.selectionEnd = strPos; txtarea.focus(); } txtarea.scrollTop = scrollPos; } The flow: I click the button, a form popouts, fill the input text box, hit the query button and the text should appear in the editor DIV. I hope I can make myself clear. Any help would be very much appreaciated Thanks

    Read the article

  • Help with this code.

    - by karthick6891
    Heading ##Hey guys i need help with this code.The short version is,i have to do match the follwing by using drag and drop in jquery and later i need to show a message whether it is right or wrong. var output = "Wrong"; var old_item ; var new_item ; var newObjArray=[]; $(function() { var $gallery = $('.gallery'), $trash = $('.trash'); $('div',$gallery).draggable({ revert: 'invalid', containment: 'document', helper: 'clone', cursor: 'move', }); // let the trash be droppable, accepting the gallery items $trash.droppable({ //accept: '#gallery div', //activeClass: 'ui-state-highlight', tolerance: 'touch', drop: function(ev, ui) { new_item = ui.draggable; $(this).droppable("option","activeClass",'.ui-state-highlight'); if(contains(newObjArray,ui.draggable)) { newObjArray.pop(ui.draggable); } newObjArray.push(ui.draggable); deleteImage(ui.draggable,$(this)); } }); // let the gallery be droppable as well, accepting items from the trash $gallery.droppable({ //accept: '#trash li', activeClass: 'custom-state-active', drop: function(ev, ui) { recycleImage(ui.draggable); } }); // image deletion function function deleteImage($item,element) { var $list; $item.fadeOut(10,function() { if($(".ui-widget-content", element).length <1){ old_item = $item; $list = $('<div class="gallery ui-helper-reset"/>').appendTo(element); //$('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash); $item.appendTo($list).fadeIn(10); } else{ recycleImage($(".ui-widget-content",element)); $list = $('<div class="gallery ui-helper-reset"/>').appendTo(element); $item.appendTo($list).fadeIn(10); old_item = $item; } }); } //check for given answer // image recycle function function recycleImage($item) { $item.fadeOut(10,function() { $item.find("img").end().appendTo($gallery).fadeIn(10); }); } // image preview function, demonstrating the ui.dialog used as a modal window }); function checkOrder(){ if(newObjArray==null){ } else if(newObjArray!=null){ if(newObjArray[0].attr("id")=="5"&& newObjArray[1].attr("id")=="1" && newObjArray[2].attr("id")=="3" && newObjArray[3].attr("id")=="2" && newObjArray[4].attr("id")=="4"){ parent.parent.increaseCorrectA(); } else{ parent.parent.increaseWrongA(); } } } function contains(a, obj) { var i = a.length; while (i--) { if (a[i] === obj) { return true; } } return false; } I am calling the function checkOrder() from the html page after the matching of items is over.What happens here is i have just stored the user responses on the draggable over droppable in an array,based on it's position.It is a bad practice cause,i am saying whether it's right or wrong through its position in the array.The only thing i can do is get the draggable's id present in the droppable.But i dont know how to get that inside the function checkOrder().Any ideas please?

    Read the article

  • Blogger issue with custom background images on Chrome and Safari

    - by hdx
    This is weird, the site in question is blog.andrebatista.info and it is a hosted at blogger.com. I'm trying to make the blogger template look the same as the one in my main website, www.andrebatista.info. For some reason if I go directly to the blog address Chrome and Safari fail to display all of my background images... all of them. However if I first go to www.andrebatista.info first and then go to the blog it renders just fine ?¿ The way I'm customizing it is by adding a link to my main site's stylesheet at the very end of the head tag on the blogger template. That stylesheet is displayed below: *{ margin:0; padding:0; border:0; } html,body { background:#064169 url(http://www.andrebatista.info/images/main_gradient_slice.jpg) repeat-x; font-family: Arial, "MS Trebuchet", sans-serif; font-size:18px; } #main_wrapper{ margin: 0 auto; width:1024px; } #header{ background: url(http://www.andrebatista.info/images/header.jpg); height:133px; border:none; margin:0; } #menu_wrapper{ background: url(http://www.andrebatista.info/images/menu.jpg); height:34px; overflow:hidden; } #menu_wrapper .menu_item{ color:white; float: left; border: 1 px solid red; height: 34px; padding-top:10px; text-align:center; width:100px; } #menu_wrapper .first{ padding-left:240px; float:left; width:100px; } #menu_wrapper .active,#menu_wrapper .menu_item:hover{ background-color:white; color:Teal; cursor: pointer; } #content_area_wrapper{ background: url(http://www.andrebatista.info/images/body_bg_slice.jpg) repeat-y; } #content_area{ min-height:524px; background: url(http://www.andrebatista.info/images/main_content_top.jpg) repeat-x; } #main_banner{ background: url(http://www.andrebatista.info/images/main_banner.jpg) no-repeat center center; width:662px; height:338px; margin: 0 auto; } #main_banner div{ color:white; padding-left:47px; padding-right:164px; padding-top:105px; } #text_area{ overflow:hidden; width:662px; margin:0 auto; padding:14px; } #contentList{ padding:0 20px 20px 20px; } #text_area .left{ width:50%; float:left; } #text_area .left{ width:50%; float:right; } #footer2{ background: url(http://www.andrebatista.info/images/footer.jpg); height:62px; } #footer{ background: url(http://www.andrebatista.info/images/footer.jpg); height:62px; } Any ideas on what I could be missing?

    Read the article

  • [C#] Not enough memory or not enough handles?

    - by Nayan
    I am working on a large scale project where a custom (pretty good and robust) framework has been provided and we have to use that for showing up forms and views. There is abstract class StrategyEditor (derived from some class in framework) which is instantiated whenever a new StrategyForm is opened. StrategyForm (a customized window frame) contains StrategyEditor. StrategyEditor contains StrategyTab. StrategyTab contains StrategyCanvas. This is a small portion of the big classes to clarify that there are many objects that will be created if one StrategyForm object is allocated in memory at run-time. My component owns all these classes mentioned above except StrategyForm whose code is not in my control. Now, at run-time, user opens up many strategy objects (which trigger creation of new StrategyForm object.) After creating approx. 44 strategy objects, we see that the USER OBJECT HANDLES (I'll use UOH from here onwards) created by the application reaches to about 20k+, while in registry the default amount for handles is 10k. Read more about User Objects here. Testing on different machines made it clear that the number of strategy objects opened is different for message to pop-up - on one m/c if it is 44, then it can be 40 on another. When we see the message pop-up, it means that the application is going to respond slowly. It gets worse with few more objects and then creation of window frames and subsequent objects fail. We first thought that it was not-enough-memory issue. But then reading more about new in C# helped in understanding that an exception would be thrown if app ran out of memory. This is not a memory issue then, I feel (task manager also showed 1.5GB+ available memory.) M/C specs Core 2 Duo 2GHz+ 4GB RAM 80GB+ free disk space for page file Virtual Memory set: 4000 - 6000 My questions Q1. Does this look like a memory issue and I am wrong that it is not? Q2. Does this point to exhaustion of free UOHs (as I'm thinking) and which is resulting in failure of creation of window handles? Q3. How can we avoid loading up of an StrategyEditor object (beyond a threshold, keeping an eye on the current usage of UOHs)? (we already know how to fetch number of UOHs in use, so don't go there.) Keep in mind that the call to new StrategyForm() is outside the control of my component. Q4. I am bit confused - what are Handles to user objects exactly? Is MSDN talking about any object that we create or only some specific objects like window handles, cursor handles, icon handles? Q5. What exactly cause to use up a UOH? (almost same as Q4) I would be really thankful to anyone who can give me some knowledgeable answers. Thanks much! :)

    Read the article

  • jQuery fadeIn and fadeOut buggy on hover of image

    - by user186319
    Hi All, I have four images on a page that on hover, needs to replace the main text with relevant text pertaining to that image. It's working but buggy. If I roll over slowly and roll off slowly, I get the desired effect. When I rollover quickly both div's content show. Here is a thinned out version of what I need to be able to do. <img src="btn-open.gif" class="btn" /> <div class="mainText"> <h1>Main text</h1> <p>Morbi mollis auctor magna, eu sodales mi posuere elementum. Donec lacus lorem, vestibulum sed luctus ac, tincidunt sit amet eros. Nullam tristique lectus lobortis nibh pharetra placerat. Aliquam quis tellus mauris. Quisque eu convallis elit. Sed vitae libero est. Suspendisse laoreet magna magna, vitae malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eros ipsum, interdum et volutpat sed, commodo aliquam odio. Maecenas auctor condimentum mi. Maecenas ante eros, tristique nec viverra sed, molestie sit amet nulla. Suspendisse vitae turpis ac felis rutrum interdum.</p> </div> <div class="replacementText"> <h1>Replacement text</h1> <p>Nulla ac magna nec quam cursus mollis eget a nulla! Vestibulum quis nibh ipsum, ut vehicula leo. Etiam ac felis suscipit mi semper vehicula. Praesent est mi, suscipit sit amet bibendum at, porta quis elit. Integer lectus est, consequat non sodales ac, pharetra sit amet tellus. Suspendisse porttitor massa a dolor suscipit sed ullamcorper ipsum vehicula. In malesuada augue sit amet ante volutpat euismod. Ut vel felis sed enim placerat ultricies. Aliquam erat volutpat. Vivamus rutrum; ante vitae euismod accumsan, felis odio lacinia magna, eu viverra nisl metus non ligula? In metus nisi, viverra vel scelerisque non, ullamcorper sed arcu? In hac habitasse platea dictumst. Donec laoreet dapibus quam vitae pulvinar. Morbi ut purus nisl. Nulla eu velit ipsum; vel mattis magna. Aenean sodales faucibus dapibus.</p> </div> $(document).ready(function() { $(".btn").hover( function() { $(this).css({ cursor: "pointer" }); $(".mainText").hide(); $(".replacementText").slideDown("slow"); }, function() { $(".replacementText").hide(); $(".mainText").slideDown("slow"); }); });

    Read the article

  • jQuery 1.4.2 and IE6: change event not firing first time using keyboard

    - by macca1
    I've done a good amount of research on this and found a bunch of reported problems and solutions but the general consensus seems that all change problems in IE6 were fixed in jQuery 1.4.2. I'm having an issue where a change event is not firing in jQuery 1.4.2, but it did fire successfully in jQuery 1.3.2. This is in IE6. I'm about to submit a bug for this, but for my sanity I wanted to post it here first to see if there's something dumb I'm missing. I don't understand why this is working this way... <HTML> <HEAD> <TITLE>jQuery 1.4.2 Problem </TITLE> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready( function() { $("#firstBox").change(function() { alert("CHANGE"); }); // ONLOAD of document autofocus into the first element... $("form").find(":input:visible:first").focus() }); </script> </HEAD> <BODY> <form> <select id="firstBox"> <option value="" selected="selected">--</option> <option value="1">One</option> <option value="2">Two</option> </select> <br><br> <input size="10" id="secondBox"> </form> </BODY> </HTML> Simple enough, right? Onload of the page, give the first element focus. Onchange of the first element, alert. If you use the mouse, it works as expected. The page loads, the focus is in the drop down, you change the option, you get the alert. The problem is if you use the keyboard. The page loads, the focus is in the drop down, you press the down arrow. The option changes. Tab off the field, no alert. Weird. To make it even weirder, if you tab back into the field and change it again (all using the keyboard), the change event DOES fire after tab out this time. Any ideas?

    Read the article

  • Using label tags in a validation summary error list?

    - by patridge
    I was thinking about making use of <label> tags in my validation error summary on a failed form submit and I can't figure out if it is going to get me in trouble down the line. Can anyone think of a good reason to avoid this approach? Usability, functionality, design, or other issues are all helpful. I really like the idea of clicking a line item in the error list and being jumped to the offending input element, especially in a mobile HTML scenario where vertical orientation is more common and scrolling is a pain. So far the only problem I can find is that labels don't navigate for radio buttons or checkboxes without individual IDs (Clicking a label for a single ID-tagged radio/checkbox element alters its selection). It doesn't make it any worse than no label, though. Here is a stripped down HTML test sample of this idea (CSS omitted for simplicity). <div class="validation-errors"> <p>There was a problem saving your form.</p> <ul> <li><label for="select1">Select 1 is invalid.</label></li> <li><label for="text1">Text 1 is invalid.</label></li> <li><label for="textarea1">TextArea 1 is invalid.</label></li> <li><label for="radio1">Radio 1 is invalid.</label></li> <li><label for="checkbox1">Checkbox 1 is invalid.</label></li> </ul> </div> <form action="/somewhere"> <fieldset><legend>Some Form</legend> <ol> <li><label for="select1">select1</label> <select id="select1" name="select1"> <option value="value1">Value 1</option> <option value="value2">Value 2</option> <option selected="selected" value="value3">Value 3</option> </select></li> <li><label for="text1">text1</label> <input id="text1" name="text1" type="text" value="sometext" /></li> <li><label for="textarea1">textarea1</label> <textarea id="textarea1" name="textarea1" rows="5" cols="25">sometext</textarea></li> <li><ul> <li><label><input type="radio" name="radio1" value="value1" />Value 1</label></li> <li><label><input type="radio" name="radio1" value="value2" checked="checked" />Value 2</label></li> <li><label><input type="radio" name="radio1" value="value3" />Value 3</label></li> </ul></li> <li><ul> <li><label><input type="checkbox" name="checkbox1" value="value1" checked="checked" />Value 1</label></li> <li><label><input type="checkbox" name="checkbox1" value="value2" />Value 2</label></li> <li><label><input type="checkbox" name="checkbox1" value="value3" checked="checked" />Value 3</label></li> </ul></li> <li><input type="submit" value="Save &amp; Continue" /></li> </ol> </fieldset> </form> The only thing I have added to make the click-capable behavior more obvious is to add a CSS rule for the labels. .validation-errors label { text-decoration: underline; cursor: pointer; }

    Read the article

  • WPF performance for large number of elements on the screen

    - by Mark
    Im currently trying to create a Scene in WPF where I have around 250 controls on my screen and the user can Pan and Zoom in and out of these controls using the mouse. I have run the WPF Performance Suite tools on the application when there are a large number of these controls on the screen (i.e. when the user has zoomed right out) the FPS drops down to around 15 which is not very good. Here is the basic outline of the XAML: <Window> <Window.Resources> <ControlTemplate x:Key="LandTemplate" TargetType="{x:Type local:LandControl}"> <Canvas> <Path Fill="White" Stretch="Fill" Stroke="Black" StrokeThickness="1" Width="55.5" Height="74.687" Data="M0.5,0.5 L55,0.5 L55,74.187 L0.5,74.187 z"/> <Canvas x:Name="DetailLevelCanvas" Width="24.5" Height="21" Canvas.Left="15.306" Canvas.Top="23.972"> <TextBlock Width="21" Height="14" Text="712" TextWrapping="Wrap" Foreground="Black"/> <TextBlock Width="17.5" Height="7" Canvas.Left="7" Canvas.Top="14" Text="614m2" TextWrapping="Wrap" FontSize="5.333" Foreground="Black"/> </Canvas> </Canvas> </ControlTemplate> </Window.Resources> ... <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx"> <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx"> <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx"> <local:LandControl Width="55.5" Height="74.552" Canvas.Top="xxx" Template=" {StaticResource LandTemplate}" RenderTransformOrigin="0.5,0.5" Canvas.Left="xxx"> ... and so on... </Window> Ive tried to minimise the details in the control template and I even did a massive find and replace of the controls to just put their raw elements inline instead of using a template, but with no noticeable performance improvements. I have seen other SO questions about this and people say to do custom drawing, but I dont really see how that make sense when you have to zoom and pan like I do. If anyone can help out here, that would be great! Mark

    Read the article

  • Search Form in Responsive Design - Remove Search button on Mobile

    - by Kevin
    I'm working with a search box in the header of a responsive website. On desktop/tablet widths, there's a search input field and a styled 'search' button to the right. You can type in a search term and either click 'SEARCH' button or just hit enter on the keyboard with the same result. When you scale down to mobile widths, the search input field fills the width of the screen. The submit button falls below it. On a desktop, clicking the button or hitting enter activate the search. On an actual iphone phone, you can hit the 'SEARCH' button, but the native mobile keyboard that rises from the bottom of the screen has a search button where the enter/return key would normally be. It seems to know I'm in a form and the keyboard automatically gives me the option to kick off the search by basically hitting the ENTER key location....but it says SEARCH. So far so good. I figure I don't need the button in the header on mobile since it's already in the keyboard. Therefore, I'll hide the button on mobile widths and everything will be tighter and look better. So I added this to my CSS to hide it in mobile: #search-button {display: none;} But now the search doesn't work at all. On mobile, I don't get the option in the keyboard that showed up before and if I just hit enter, it doesn't work at all. On desktop at mobile width, hitting enter also not longer works. So clearly by hiding the submit/search button, the phone no longer gave me the native option to run the search. In addition, on the desktop at mobile width, even hitting enter inside the search input box also fails to launch the the search. Here's my search box: <form id="search-form" method="get" accept-charset="UTF-8, utf-8" action="search.php"> <fieldset> <div id="search-wrapper"> <label id="search-label" for="search">Item:</label> <input id="search" class="placeholder-color" name="item" type="text" placeholder="Item Number or Description" /> <button id="search-button" title="Go" type="submit"><span class="search-icon"></span></button> </div> </fieldset> </form> Here's what my CSS looks like: #search-wrapper { float: left; display: inline-block; position: relative; white-space: nowrap; } #search-button { display: inline-block; cursor: pointer; vertical-align: top; height: 30px; width: 40px; } @media only screen and (max-width: 639px) { #search-wrapper { display: block; margin-bottom: 7px; } #search-button { /* this didn't work....it hid the button but the search failed to load */ display: none;*/ } } So.....how can I hide this submit button when I'm on a mobile screen, but still let the search run from the mobile keyboard or just run by hitting enter when in the search input box. I was sure that putting display:none on the search button at mobile width would do the trick, but apparently not. Thanks...

    Read the article

  • Sanity Check: change event not firing first time using keyboard

    - by macca1
    I've done a good amount of research on this and found a bunch of reported problems and solutions but the general consensus seems that all change problems in IE6 were fixed in jQuery 1.4.2. I'm having an issue where a change event is not firing in jQuery 1.4.2, but it did fire successfully in jQuery 1.3.2. This is in IE6. I'm about to submit a bug for this, but for my sanity I wanted to post it here first to see if there's something dumb I'm missing. I don't understand why this is working this way... <HTML> <HEAD> <TITLE>jQuery 1.4.2 Problem </TITLE> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script> $(document).ready( function() { $("#firstBox").change(function() { alert("CHANGE"); }); // ONLOAD of document autofocus into the first element... $("form").find(":input:visible:first").focus() }); </script> </HEAD> <BODY> <form> <select id="firstBox"> <option value="" selected="selected">--</option> <option value="1">One</option> <option value="2">Two</option> </select> <br><br> <input size="10" id="secondBox"> </form> </BODY> </HTML> Simple enough, right? Onload of the page, give the first element focus. Onchange of the first element, alert. If you use the mouse, it works as expected. The page loads, the focus is in the drop down, you change the option, you get the alert. The problem is if you use the keyboard. The page loads, the focus is in the drop down, you press the down arrow. The option changes. Tab off the field, no alert. Weird. To make it even weirder, if you tab back into the field and change it again (all using the keyboard), the change event DOES fire after tab out this time. Any ideas?

    Read the article

  • jQuery fadeIn fadeOut pause on hover

    - by theDawckta
    I have a little jQuery snippet that will fadeIn and fadeOut a group of divs over a select interval. I now need to pause this fadeIn fadeOut on hover, then resume on mouse out. Any help is appreciated. Here is the relevant code. The following is what is located in my body <div class="gcRotate"> <div class="gcRotateContent"> <div style="border: solid 2px black; text-align: center; width: 150px;"> This is first content <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg" alt="Dude" /> </div> </div> <div class="gcRotateContent"> <div style="border: solid 2px black; text-align: center; width: 150px"> This is second content <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg" alt="Dude" /> </div> </div> <div class="gcRotateContent"> <div style="border: solid 2px black; text-align: center; width: 150px"> This is third content <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Dude" /> </div> </div> </div> <div> This shouldn't move. </div> <script type="text/javascript"> function fadeContent() { $(".gcRotate .gcRotateContent:hidden:first").fadeIn(500).delay(2000).fadeOut(500, function() { $(this).appendTo($(this).parent()); fadeContent(); }); } $(".gcRotate").height(0); $(".gcRotateContent").each( function() { if ($(".gcRotate").height() < $(this).height()) { $(".gcRotate").height($(this).height()); } } ); $(".gcRotateContent").each(function() { $(this).css("display", "none") }); fadeContent(); </script>

    Read the article

  • Why are these styles not visible in IE6

    - by Laramie
    Given the following markup <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> div.apartBox { padding:12px; background: #FFFFFF; border: solid 1px #6182A3; } .browser { background: #fff; border: solid 1px #0055E3; border-top: solid 12px #0055E3; border-bottom: solid 4px #7A99C5; padding:10px 10px 8px 14px; color: #333; font: 0.8em/1 arial; margin: 8px 20px; } .callout { background: #EEF2F0; border: solid 1px #9CC7C0; padding:8px; } </style> </head> <BODY> <div class="apartBox" id="subPopout" style="Z-INDEX: 2; WIDTH: 400px; POSITION: relative"> <div id="upSubPop"> <div class="callout" id="subDetails"> <div class="browser"> <span id="txtExample">Me afecta que digan que soy incapaz.</span> </div> </div> </div> </div> </BODY></HTML> The styles from the css .browser and .callout are not visible in IE6 unless I manually remove the position:relative style from subPopout. This div is generated automatically from a modal popup so I unfortunately can't touch this style. It displays fine in FF. If I select the .browser div with my mouse, it displays when I unselect it!

    Read the article

  • Spring MVC working with Web Designers

    - by jboyd
    When working with web-designers in a Spring-MVC and JSP environment, are there any tools or helpful patterns to reduce the pain of going back and forth from HTML to JSP and back? Project requirements dictate that views will change often, and it can be difficult to make changes efficiently because of the amount of Java code that leaks into the view layer. Ideally I'd like to remove almost all Java code from the view, but it does not seem like this works with the Spring/JSP philosophy where often the way to remove Java code is to replace that code with tag libraries, which will still have a similar problem. To provide a little clarity to my question I'm going to include some existing code (inherited by me) to show the kinds of problems I'm likely to face when change the look of our views: <%-- Begin looping through results --%> <% List memberList = memberSearchResults.getResults(); for(int i = start - 1; i < memberList.size() && i < end; i++) { Profile profile = (Profile)memberList.get(i); long profileId = profile.getProfileId(); String nickname = profile.getNickname(); String description = profile.getDescription(); Image image = profile.getAvatarImage(); String avatarImageSrc = null; int avatarImageWidthNum = 0; int avatarImageHeightNum = 0; if(null != image) { avatarImageSrc = image.getSrc(); avatarImageWidthNum = image.getWidth(); avatarImageHeightNum = image.getHeight(); } String bgColor = i % 2 == 1 ? "background-color:#FFF" : ""; %> <div style="float:left;clear:both;padding:5px 0 5px 5px;cursor:pointer;<%= bgColor %>" onclick='window.location="profile.sp?profileId=<%= profileId %>"'> <div style="float:right;clear:right;padding-left:10px;width:515px;font-size:10px;color:#7e7e7e"> <h6><%= nickname %></h6> <%= description %> </div> <img style="float:left;clear:left;" alt="Avatar Image" src="<%= null != avatarImageSrc && avatarImageSrc.trim().length() > 0 ? avatarImageSrc : "images/defaultUserImage.png" %>" <%= avatarImageWidthNum < avatarImageHeightNum ? "height='59'" : "width='92'" %> /> </div> <% } // End loop %> Now, ignoring some of the code smells there, it's obvious that if someone wants to change the look of that DIV it would be neccesary to re-place all the Java/JSP code into the new HTML given (the designers don't work in JSP files, they have their own HTML versions of the website). Which is tedious, and prone to errors.

    Read the article

  • show-hide image onmouseover

    - by butters
    I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again. The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^ my code looks something like this: <html> <head> <style type="text/css"> <!-- ul li{ display: inline-table; } .frame{ position: relative; height: 110px; width: 110px; } .frame div{ position: absolute; top:0px; left:0px; } .effect{ background:url(images/effect.png) no-repeat; height:110px; width: 110px; } .image{ height:100px; width:100px; border: 1px solid red; margin:4px; } .greyscale{ height:100px; width:100px; border: 1px solid red; margin:4px; } --> </style> </head> <body> <ul> <li> <div class="frame"> <div class="image"><img src="images/pic1.jpg" height="100" width="100"></div> <div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div> <div class="effect">qwert</div> </div> </li> <li> <div class="frame"> <div class="image"><img src="images/pic2.jpg" height="100" width="100"></div> <div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div> <div class="effect">qewrt</div> </div> </li> </ul> </body> </html> </code></pre> would be super-awesome if someone can help me out :)

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 287 288 289 290 291 292 293 294 295 296 297 298  | Next Page >