Search Results

Search found 3408 results on 137 pages for 'margin'.

Page 110/137 | < Previous Page | 106 107 108 109 110 111 112 113 114 115 116 117  | Next Page >

  • sIFR header with inside span

    - by Pokepoke
    I've got the following situation: <h2>This text is <span>pretty awesome</span></h2> I'm trying to give both a different style like this (only the css): h2 { font-size: 21px; text-transform: uppercase; line-height: 37px; height: 36px; text-align: right; margin-right: 10px; } h2 span { font-size: 16px; color: #666666; text-transform: lowercase; } Now just calling this like the following things doenst work and only displays the general H2 style: sIFR.replace(headache, { selector: 'h2', css: ['.sIFR-root { stylesforh2 } '], wmode: 'transparent' }); sIFR.replace(headache, { selector: 'h2 span', css: ['.sIFR-root { stylesforspan } '], wmode: 'transparent' }); neither does this work: sIFR.replace(headache, { selector: 'h2', css: ['.sIFR-root { stylesforh2 }, span { stylesforspan} '], wmode: 'transparent' }); I'm a sIFR firsttimer and I'm problably doing something silly wrong, but I cant figure it out. Can someone tell me how its done properly? Using sIFRT version 3, revision 436. Tnx in advance

    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

  • Windows Phone 7 ListBox uncustomizable?

    - by Roy
    I've just recently started development using Visual Studio 2010 Express for Windows Phone and I put in a ListBox. I can't seem to manipulate the formatting. No matter what I do, the background is black/gray, the selected items have a blue border, and there is padding between the items in the listbox (i'm using images). Here is my code: Xaml: <Grid x:Name="ContentGrid" Grid.Row="1"> <Grid Name="gallery"> <Grid.RowDefinitions> <RowDefinition Height="370" /> <RowDefinition Height="150" /> </Grid.RowDefinitions> <Border BorderBrush="Red" Width="450" CornerRadius="4" BorderThickness="2" Background="Red" Margin="10,30,20,10" Padding="6,6,6,6"> <Image Grid.Row="0" Grid.Column="0" Height="360" x:Name="imgPreview"/> </Border> <ListBox x:Name="lbScrollGallery" Grid.Row="1" Grid.Column="0" Padding="0" VerticalAlignment="Top" Width="450" SelectionChanged="ScrollerSelectionChanged" d:LayoutOverrides="HorizontalAlignment" ScrollViewer.HorizontalScrollBarVisibility="Hidden"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <Image Width="100" Height="100" Stretch="Fill" Name="imgSource" VerticalAlignment="Center" Source="{Binding Path=Url}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </Grid> Is there some way I can customize the listbox? Like change the background to red or make the padding between different items 0?

    Read the article

  • Please critisize this method

    - by Jakob
    Hi I've been looking around the net for some tab button close functionality, but all those solutions had some complicated eventhandler, and i wanted to try and keep it simple, but I might have broken good code ethics doing so, so please review this method and tell me what is wrong. public void AddCloseItem(string header, object content){ //Create tabitem with header and content StackPanel headerPanel = new StackPanel() { Orientation = Orientation.Horizontal, Height = 14}; headerPanel.Children.Add(new TextBlock() { Text = header }); Button closeBtn = new Button() { Content = new Image() { Source = new BitmapImage(new Uri("images/cross.png", UriKind.Relative)) }, Margin = new Thickness() { Left = 10 } }; headerPanel.Children.Add(closeBtn); TabItem newTabItem = new TabItem() { Header = headerPanel, Content = content }; //Add close button functionality closeBtn.Tag = newTabItem; closeBtn.Click += new RoutedEventHandler(closeBtn_Click); //Add item to list this.Add(newTabItem); } void closeBtn_Click(object sender, RoutedEventArgs e) { this.Remove((TabItem)((Button)sender).Tag); } So what I'm doing is storing the tabitem in the btn.Tag property, and then when the button is clicked i just remove the tabitem from my observablecollection, and the UI is updated appropriately. Am I using too much memory saving the tabitem to the Tag property?

    Read the article

  • checkbox like radiobutton wpf c#

    - by rockenpeace
    i have investigated this problem but this is solved in design view and code-behind. but my problem is little difference: i try to do this as only code-behind because my checkboxes are dynamically created according to database data.In other words, number of my checkboxes is not stable. i want to check only one checkbox in group of checkboxes. when i clicked one checkbox,i want that ischecked property of other checkboxes become false.this is same property in radiobuttons. i take my checkboxes from a stackpanel in xaml side: <StackPanel Margin="4" Orientation="Vertical" Grid.Row="1" Grid.Column="1" Name="companiesContainer"> </StackPanel> my xaml.cs: using (var c = new RSPDbContext()) { var q = (from v in c.Companies select v).ToList(); foreach (var na in q) { CheckBox ch = new CheckBox(); ch.Content = na.Name; ch.Tag = na; companiesContainer.Children.Add(ch); } } foreach (object i in companiesContainer.Children) { CheckBox chk = (CheckBox)i; chk.SetBinding(ToggleButton.IsCheckedProperty, "DataItem.IsChecked"); } how can i provide this property in checkboxes in xaml.cs ? thanks in advance..

    Read the article

  • Facebook and retrieving a users "wall"

    - by Neurofluxation
    I have been given the dubious task of working with the Facebook API. I have managed to get quite far with all the little bits and pieces (bringing in "fan pages" and "friend lists"). However, I cannot seem to import a users wall into my App using SOLELY Javascript. I have this code to bring in the users friends: var widget_div = document.getElementById("profile_pics"); FB.ensureInit(function () { FB.Facebook.get_sessionState().waitUntilReady(function() { FB.Facebook.apiClient.friends_get(null, function(result) { var markup = ""; var num_friends = result ? Math.min(100, result.length) : 0; if (num_friends > 0) { for (var i=0; i<num_friends; i++) { markup += "<div align='left' class='commented' style='background-color: #fffbcd; border: 1px solid #9d9b80; padding: 0px 10px 0px 0px; margin-bottom: 5px; width: 75%; height: 50px; font-size: 16px;'><fb:profile-pic size='square' uid='"+result[i]+"' facebook-logo='true'></fb:profile-pic><div style='float: right; padding-top: 15px;'><fb:name uid='"+result[i]+"'></fb:name></div></div>"; } } widget_div.innerHTML = markup; FB.XFBML.Host.parseDomElement(widget_div); }); }); }); /*******YOUR FRIENDS******/ FB.XFBML.Host.parseDomTree(); Any idea whether I can change this to retrieve the Walls? Thanks in advance you great people! ^_^

    Read the article

  • Databinding combobox selected item to settings

    - by Tuukka
    I store user specified settings using application settings properties and databinding. It has been working fine, until i want user selected to font for combobox. Databinding between user settings and combobox not working. I want to store font family name. App.XML <Application.Resources> <ResourceDictionary> <properties:Settings x:Key="Settings" /> </ResourceDictionary> </Application.Resources> Window.XML <ComboBox Name="Families" ItemsSource="{x:Static Fonts.SystemFontFamilies}" <!-- This line --> SelectedItem="{Binding Source={StaticResource Settings}, Path=Default.Font, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Margin="57,122,199,118"> <ComboBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding}" FontFamily="{Binding}"/> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> Settings: font String User Arial

    Read the article

  • auto expand div height

    - by Geln
    <html><head><title>Test</title> <style> .main{width:600px;border:1px solid red; } .main .left{background:lightblue; width:100px;clear:both; float:left;} .main .right{margin-left:100px;background:lightyellow; } </style> </head><body> <div class="main"> <div class="left"> title </div> <div class="right"> <div id="item">item</div> <div id="item">item</div> <div id="item">item</div> <div id="item">item</div> <div id="item">item</div> <div id="item">item</div> <div id="item">item</div> </div> </div> </body></html> How to change the CSS to make the page display like the dialog shows? PS,I think it's a way that to make the "left" div's height auto expand when the height of the "right" div or parent div expand, but I don't know how.

    Read the article

  • Show cue banner for wpf ComboBox with grouping

    - by Adam Duston
    I have a ComboBox in my WPF form: <ComboBox Margin="75,0,15,102" Name="videoFormatCombo" Height="23" VerticalAlignment="Bottom" DataContext="{StaticResource GroupedVideoFormats}" ItemsSource="{Binding}" ItemTemplate="{StaticResource VideoFormatTemplate}"> <ComboBox.GroupStyle> <GroupStyle HeaderTemplate="{StaticResource GroupHeader}"/> </ComboBox.GroupStyle> </ComboBox> As you might be able to guess, GroupedVideoFormats is a CollectionViewSource with grouping. I need to get a cue banner to display for this ComboBox. I've attempted the solution that is (very verbosely) outlined in this blog post, but it will not work for a ComboBox with grouped data. The two solutions outlined in superfluousprefixhttp://stackoverflow.com/questions/2548757/how-can-the-blank-space-in-a-c-combobox-be-filled-as-a-hint-for-the-user are for Windows Forms ComboBoxes only, and won't work with WPF. If it would help to see all the original source, this particular form is on github: superfluousprefixhttp://github.com/8planes/mirovideoconverter/blob/master/MSWindows/Windows/FileSelect.xaml . It's an open-source project, so the entire project is on github: superfluousprefixhttp://github.com/8planes/mirovideoconverter/tree/master/MSWindows . Thank you for any advice! Adam P.S. stackoverflow wouldn't let me make more than one anchor tag in my post, hence the long urls with the superfluous prefix. Sorry!

    Read the article

  • CSS style to create an HTML with an image on left and input text boxes on right that fills all space

    - by dafi
    I need to create an HTML page (a JqueryUI dialog but this isn't the problem) containing an image on left (size is fixed to 75x75) and on right some input text boxes, input boxes must resize to all remaining space. You can see an example at http://img683.imageshack.us/img683/5412/19483174.jpg The problem is that when I resize the dialog controls move under image as shown at http://img510.imageshack.us/img510/4817/44749696.jpg How can I resolve this problem in all browser and if possible using only CSS? Below I show my HTML code and the CSS I'm using HTML code <div id="dialog-form" title="Modify Post"> <form action=""> <fieldset> <img id="dialog-modify-thumb" src="http://dummyimage.com/75x75/000/fff" alt="" width="75" height="75"/> <div id="dialog-modify-controls"> <label for="dialog-modify-caption">Caption</label> <input type="text" name="dialog-modify-caption" id="dialog-modify-caption"/> <br/> <label for="dialog-modify-tags">Tags</label> <input type="text" name="dialog-modify-tags" id="dialog-modify-tags"/> <br/> <label for="dialog-modify-publish-date">Publish Date</label> <input type="text" name="dialog-modify-publish-date" id="dialog-modify-publish-date"/> </div> </fieldset> </form> </div> The CSS #dialog-modify-thumb { margin-right: 3px; border: 1px solid; display: block; float:left; } #dialog-form input[type='text'] { width: 100%; } #dialog-modify-controls { float: right; width:100%; }

    Read the article

  • Can't find solution for CSS vertical align for Firefox

    - by Sergio
    I have a problem with DIV vertical align in Firefox The HTML code is: <div class="mess"><div class="rpl"><img src="img/16.png" width="16" height="16" border="0"></div><div class="pic"><img src="img/1.png" width="100" height="100" border="0"></div></div> The CSS looks like: .mess{ float:left; width:658px; border-top:1px solid #CCC;padding-top:5px; } .rpl{ position: relative;width:19px; float:left;top: 20%;display: table-cell; vertical- align: middle; padding-top:20px; } .pic{width:100px; float:left; padding-bottom:5px;margin-right:10px; } I'm trying to put "rpl" DIV at the vertical middle of the "mess" DIV. In IE it looks fine but I can't get it right in Firefox (always at the top of the "mess" div) I tried with display: inline,display: table-cell for "rpl" DIV but with no effect in FF. Is there any solution for vertical align for DIV in FF?

    Read the article

  • Calling a datatrigger for a radio button inside a datagrid

    - by Farax
    I have a datagrid with one column having a radio button. I want to set the GroupName when a certain condition is reached. Below is the code <Custom:DataGrid.Columns> <!-- ONLY ENABLED WHEN THE ITEM TYPE IS SINGLESELECT OR SINGLESELECT WITH ADDIOTIONAL DATA--> <Custom:DataGridTemplateColumn CanUserResize="False" MinWidth="20" > <Custom:DataGridTemplateColumn.CellTemplate> <DataTemplate> <RadioButton IsChecked="{Binding IsChecked}" d:DesignWidth="16" d:DesignHeight="16" GroupName="SingleChoiceSelection" Template="{DynamicResource RadioButtonTemplate}" Background="{DynamicResource BackgroundNew}" BorderBrush="#FF7A7171" Foreground="#FF6C6C6C" Margin="0" /> </DataTemplate> </Custom:DataGridTemplateColumn.CellTemplate> </Custom:DataGridTemplateColumn> <Custom:DataGridTextColumn Header="Choices" Binding="{Binding ChoiceText}" CellStyle="{DynamicResource DataGridCellStyle2}" MinWidth="150" /> </Custom:DataGrid.Columns> </Custom:DataGrid> The ItemSource contains a property called isChecked and I want to change the foreground color when isChecked is changed to true. How do i do this with a datatrigger?

    Read the article

  • extjs how to make a nested child using xTemplate when we don't know how deep is it?

    - by Ebo the gordon
    first, sorry if my english bad,.... in my script, variable tplData below is dynamic,... (lets say it generates from database) so, every chid, can have another child. and so on,.... now, i'm stack how to iteration it,.. var tplData = [{ name : 'Naomi White' },{ name : 'Yoko Ono' },{ name : 'John Smith', child : [{ name:'Michael (John\'s son)', child: [{ name : 'Brad (Michael\'s son,John\'s grand son)' },{ name : 'Brid (Michael\'s son,John\'s grand son)', child: [{ name:'Buddy (Brid\'s son,Michael\'s grand son)' }] },{ name : 'Brud (Michael\'s son,John\'s grand son)' }] }] }]; var myTpl = new Ext.XTemplate( '<tpl for=".">', '<div style="background-color: {color}; margin: 10px;">', '<b> Name :</b> {name}<br />', // how to make this over and over every child (while it has ) '<tpl if="typeof child !=\'undefined\'">', '<b> Child : </b>', '<tpl for="child">', '{name} <br />', '</tpl>', '</tpl>', /////////////////////////////////////// '</div>', '</tpl>' ); myTpl.compile(); myTpl.overwrite(document.body, tplData);

    Read the article

  • Dojox Datagrid contains data, but shows up as empty

    - by Vivek
    I'd really appreciate any help on this. There is this Dojox Datagrid that I'm creating programatically and supplying JSON data. As of now, I'm creating this data within JavaScript itself. Please refer to the below code sample. var upgradeStageStructure =[{ cells:[ { field: "stage", name: "Stage", width: "50%", styles: 'text-align: left;' }, { field:"status", name: "Status", width: "50%", styles: 'text-align: left;' } ] }]; var upgradeStageData = [ {id:1, stage: "Preparation", status: "Complete"}, {id:2, stage: "Formatting", status: "Complete"}, {id:3, stage: "OS Installation", status: "Complete"}, {id:4, stage: "OS Post-Installation", status: "In Progress"}, {id:5, stage: "Application Installation", status: "Not Started"}, {id:6, stage: "Application Post-Installation", status: "Not Started"} ]; var stagestore = new dojo.data.ItemFileReadStore({data:{identifier:"id", items: upgradeStageData}}); var upgradeStatusGrid = new dojox.grid.DataGrid({ autoHeight: true, style: "width:400px;padding:0em;margin:0em;", store: stagestore, clientSort: false, rowSelector: '20px', structure: upgradeStageStructure, columnReordering: false, selectable: false, singleClickEdit: false, selectionMode: 'none', loadingMessage: 'Loading Upgrade Stages', noDataMessage:'There is no data', errorMessage: 'Failed to load Upgrade Status' }); dojo.byId('progressIndicator').innerHTML=''; dojo.byId('progressIndicator').appendChild(upgradeStatusGrid.domNode); upgradeStatusGrid.startup(); The problem is that I am not seeing anything within the grid upon display (no headers, no data). But I know for sure that the data in the grid does exist and the grid is properly initialized, because I called alert (grid.domNode.innerHTML);. The resultant HTML that is thrown up does show a table containing header rows and the above data. This link contains an image which illustrates what I'm seeing when I display the page. (Can't post images since my account is new here) As you may notice, there are 6 rows for 6 pieces of data I have created but the grid is a mess. Please help out if you think you know what could be going wrong. Thanks in advance, Viv

    Read the article

  • Images not responsive although in responsive container

    - by Darren Sweeney
    I have the following: <div id="hp_imgs"> <img src="/images/hp/1.jpg"> <img src="/images/hp/2.jpg"> <img src="/images/hp/3.jpg"> <img src="/images/hp/4.jpg"> <img src="/images/hp/5.jpg"> <img src="/images/hp/6.jpg"> <img src="/images/hp/7.jpg"> <img src="/images/hp/8.jpg"> </div> The images were sized when created to form a grid of sorts, so need to be in the order where they are. Consequently, when/if the page is resized I want the images to resize and stay where they are. Here's what I'm trying but images are simply staying the same size and not resizing: #hp_imgs { width:66%; float:left; } #hp_imgs img { float:left; margin:2px; border-radius:4px; display: block; max-width:100%; height:100%; } Is there a better/different way to achieve this? FIDDLE Here's a sample to play with: Fiddle

    Read the article

  • How to disable vertical bounce/scroll on iPhone in a mobile web application

    - by Kasper Skov
    As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas? Im using jquery.mobile btw :) Update: I actually managed to get the code from the first answer working somewhat: function stopScrolling( touchEvent ) { touchEvent.preventDefault(); } document.addEventListener( 'touchstart' , stopScrolling , false ); document.addEventListener( 'touchmove' , stopScrolling , false ); The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me). But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet. Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.

    Read the article

  • CSS buttons and crossbrowser issue

    - by Jason
    I have a class 'button' that I want to use for button, input and a tags. The problem is that both button and input tags have a greater line height than the anchor tag does. I have attached an example here so you can play around with it in firebug or whatever. http://28dev.com/stackoverflow/css-buttons.html But for those who just want to see the css/html, here it is: .button { font-family : helvetica, arial, sans-serif; -moz-border-radius: 3px; -webkit-border-radius: 3px; background : url(/images/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6; border-color : #636363 #888888 #888888 #636363; border-right : 1px solid #888888; border-style : solid; border-width : 1px; cursor : pointer; display : block; float : left; font-size : 12px; font-weight : normal; line-height : 100%; min-width : 100px; padding : 3px 12px; text-align : center; } .button, .button a { color : #282828; text-decoration : none; } .button:hover, .button:hover a { border-color : #343434; color : #080808; } .marginR { margin-right : 5px; } <button class='button marginR' type='submit'>button.button</button> <input type="submit" value="input.button" class="button marginR" /> <a class="button" href="">a.button</a>

    Read the article

  • VS2010 and CSS: What is the best strategy to individually position form controls

    - by George
    OK, I have a ton of controls on my page that I need to individually place. I need to set a margin here, a padding there, etc. None of these particular styles that I want to apply will be applied to more than control. What is the bets practice for determining at which level the style is placed, etc? OK, my choices are 1) External CSS file 1A) Using ClientIdMode = Auto (the default) I could assign a unique CssClass value to the ASP.NET control and, in the external CSS file, create a class selector that would only be applied to that one control. 1B) User Client ID = Predicatable In the external CSS file, I could determine what the ID will be for the controls of interest and create an ID selector (#ControlID{Style} ). However, I fear maintenance issues due to including/removing parent containers that would cause the ID to change. 1C) User Client ID = Static. I could choose static IDs for the controls such that I minimize the likelihood of a clash with auto generated IDs (perhaps by prefixing the ID with "StaticID_" and use an external stylesheet with ID selectors. 2) I could place the style right on the control. The only disadvantage here, as I see it, is that style info is brought down each time instead of being cached , which is what I'd get using an external CSS. If a style isn't resused, I personally don't see much benefit to placing it in an external file, though please explain why if you disagree. Is there moire of a reason that "It's nice to have all the CSS in one place?"

    Read the article

  • Binding DataTemplates (or another aproach)

    - by Bataglião
    Hi all, I'm having some troubles trying to dynamically generate content in WPF and after it bind data. I have the following scenario: TabControl - Dynamically generated TabItems through DataTemplate - inside TabItems, I have dynamic content generated by DataTemplate that I wish to bind (ListBox). The code follows: ::TabControl <TabControl Height="252" HorizontalAlignment="Left" Name="tabControl1" VerticalAlignment="Top" Width="458" Margin="12,12,12,12" ContentTemplate="{StaticResource tabItemContent}"></TabControl> ::The Template for TabControl to generate TabItems <DataTemplate x:Key="tabItemContent"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <ListBox ItemTemplate="{StaticResource listBoxContent}" ItemsSource="{Binding}"> </ListBox> </Grid> </DataTemplate> ::The template for ListBox Inside each TabItem <DataTemplate x:Key="listBoxContent"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="22"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Column="0" Source="{Binding Path=PluginIcon}" /> <TextBlock Grid.Column="1" Text="{Binding Path=Text}" /> </Grid> </DataTemplate> So, when I try to do this on code inside a loop to create the tabitems: TabItem tabitem = tabControl1.Items[catIndex] as TabItem; tabitem.DataContext = plugins.ToList(); where 'plugins' is an Enumerable The ListBox is not bounded. I tried also to find the ListBox inside the TabItem to set the ItemSource property but no success at all. Someone have an idea on how to do that? Thanks in advance.

    Read the article

  • Binding event handlers to specific elements, using bubbling (JavaScript/jQuery)

    - by Bungle
    I'm working on a project that approximates the functionality of Firebug's inspector tool. That is, when mousing over elements on the page, I'd like to highlight them (by changing their background color), and when they're clicked, I'd like to execute a function that builds a CSS selector that can be used to identify them. However, I've been running into problems related to event bubbling, and have thoroughly confused myself. Rather than walk you down that path, it might make sense just to explain what I'm trying to do and ask for some help getting started. Here are some specs: I'm only interested in elements that contain a text node (or any descendant elements with text nodes). When the mouse enters such an element, change its background color. When the mouse leaves that element, change its background color back to what it was originally. When an element is clicked, execute a function that builds a CSS selector for that element. I don't want a mouseover on an element's margin area to count as a mouseover for that element, but for the element beneath (I think that's default browser behavior anyway?). I can handle the code that highlights/unhighlights, and builds the CSS selector. What I'm primarily having trouble with is efficiently binding event handlers to the elements that I want to be highlightable/clickable, and avoiding/stopping bubbling so that mousing over a (<p>) element doesn't also execute the handler function on the <body>, for example. I think the right way to do this is to bind event handlers to the document element, then somehow use bubbling to only execute the bound function on the topmost element, but I don't have any idea what that code looks like, and that's really where I could use help. I'm using jQuery, and would like to rely on that as much as possible. Thanks in advance for any guidance!

    Read the article

  • Following code overflows my browser window

    - by oneat
    Why following HTML (CSS) code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <style type="text/css"> *{margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;} div#header{width:100%;height:10%;min-width:100px;height:30%;background-color:red;} div#left_bar{width:20%;height:85%;float:left;background-color:green;} div#content{width:80%;height:85%;float:left;background-color:yellow;} div#foot{width:100%;height:5%;clear:both;background-color:black;} </style> <div id="header">a</div> <div id="left_bar">s</div> <div id="content">d</div> <div id="foot">f</div> </body> </html> Fails to fill my browser's (firefox 3.6.13 linux) window? I mean that I have to scroll down to see bottom. Any ideas?

    Read the article

  • What other things would be good to include in CSS reset (along with eric meyer reset) for any projec

    - by metal-gear-solid
    I know and use eric meyer CSS reset, but is there any more things which would be good to add in reset css? and can save our time and increase compatibility. This is default meyer's latest CSS reset code. /* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }

    Read the article

  • Does height and width not apply to span?

    - by Kyle Sevenoaks
    Total noob question, but here. CSS .product__specfield_8_arrow { /*background-image:url(../../upload/orng_bg_arrow.png); background-repeat:no-repeat;*/ background-color:#fc0; width:50px !important; height:33px !important; border: 1px solid #dddddd; border-left:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-bottom-left-radius:0px; border-top-left-radius:0px; -moz-border-radius-bottomleft:0px; -moz-border-radius-topleft:0px; -webkit-border-bottom-left-radius:0px; -webkit-border-top-left-radius:0px; margin:0; padding:2px; cursor:pointer; }??? HTML <span class="product__specfield_8_arrow">&nbsp;</span>? Fiddle Basically I'm trying to emulate a button, make a span (or something) look like a button next to an input field that actually doesn't need to be one because of an auto fill generator that generates errors onEnter. Thought this'd be a quick fix for now but obviously not. Thanks.

    Read the article

  • CSS: Horizontal scrolling with overflow-x

    - by ams
    Hello fellow programmers, I was wondering if there still isn't a good way to get a div to stretch and scroll horizontally, according to the images inside. -After all, it is 2011 now! The mega-width does the trick, but leaves an empty mega-space if not filled with images. If filled too much, images don't display. Same for the jQuery. The situation below is the best I can do after hours of Googling, but it isn't reliable enough. Thanks for your time. Ams * { margin:0; padding:0; } #one { width:200px; height:250px; overflow-x:auto; overflow-y:hidden; } #two { width:10000em; } #two img { float:left; } $(document).ready(function(){ var total=0; $(".calc").each(function(){ total += $(this).outerWidth(true); }); $("#two").css('width',total); alert(total); }); <div id="one"> <div id="two"> <img src="images/testimage3.jpg" width="480" height="192" class="calc"> <img src="images/testimage3.jpg" width="480" height="192" class="calc"> <img src="images/testimage3.jpg" width="480" height="192" class="calc"> <img src="images/testimage3.jpg" width="480" height="192" class="calc"> </div> </div>

    Read the article

  • How to float a <div> echoed in the footer over a <div> located elsewhere (PHP/jQuery/HTML/CSS)

    - by PlasmaFlux
    Hello All! I'm embarking on a major project, but am stuck on a tiny issue at the very start. I'll try to be as concise as possible. I have a PHP script that will be echoing into the footer of the page (the last stuff before a bunch of s containing visible buttons and s containing hidden dialog boxes. The plan is to have the buttons float in the upper-right corner of corresponding s in the main content area of the page. i.e. - button-1 echoed into the footer will float in the corner of content-box-1, and will be tied to the hidden 'dialog-1'. I'll be using jQuery and jQuery UI Dialog throughout the page(s). I'm not sure if that's particularly relevant to this question, but thought it worth mentioning just in case. So my question, put simply, is how do I echo a Button 1 into the footer with PHP, but have it float in the upper-right corner (with maybe 5px margin) of Content 1 is full of content? A picture says a thousand words: As shown above, I want the little blue gear button things in the corner of content pieces, locked and loaded with hidden s containing dialog boxes. Again, the catch is that all buttons and hidden divs will be the very last items echoed into the page footer. I've found plenty of info on how to float divs on top of divs, but all the examples I saw showed the s in close proximity to each other in the page source; not with a hundred lines of source code between the two s I'm not sure if the solution is pure CSS, pure jQuery/jQueryUI or a combination of the two. Any advice will be much appreciated. Thanks!

    Read the article

< Previous Page | 106 107 108 109 110 111 112 113 114 115 116 117  | Next Page >