Search Results

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

Page 52/137 | < Previous Page | 48 49 50 51 52 53 54 55 56 57 58 59  | Next Page >

  • How do you fix the Silverlight application shift that occurs in the Firefox browser?

    - by Roy
    Hi, Currently I have an Silverlight application that when run on Firefox browser (ver 3.6) the entire contents of the Silverlight application shifts a little, and also the scrollbars on both the bottom and the side appear when I first use it. This does not happen in IE 8. How can I fix this in Firefox so it doesn't happen? The project type I created was the "Silverlight 3 Application + Website" via Expression Blend 3. This the code I am using in my MainPage.xaml: <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="StackoverflowExample.MainPage" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="Green"> <Rectangle Fill="#FFBB2020" Stroke="Black" Margin="155,58,266,178"/> <Button Margin="199,180,302,236" Content="Button"/> </Grid> </UserControl>

    Read the article

  • Extended with advice: Moving block wont work in Javascript

    - by Mack
    Hello Note: this is an extension of a question I just asked, i have made the edits & taken the advice but still no luck I am trying to make a webpage where when you click a link, the link moves diagonally every 100 milliseconds. So I have my Javascript, but right now when I click the link nothing happens. I have run my code through JSLint (therefore changed comaprisions to === not ==, thats weird in JS?). I get this error from JSLink though: Error: Implied global: self 15,38, document 31 What do you think I am doing wrong? <script LANGUAGE="JavaScript" type = "text/javascript"> <!-- var block = null; var clockStep = null; var index = 0; var maxIndex = 6; var x = 0; var y = 0; var timerInterval = 100; // milliseconds var xPos = null; var yPos = null; function moveBlock() { if ( index < 0 || index >= maxIndex || block === null || clockStep === null ) { self.clearInterval( clockStep ); return; } block.style.left = xPos[index] + "px"; block.style.top = yPos[index] + "px"; index++; } function onBlockClick( blockID ) { if ( clockStep !== null ) { return; } block = document.getElementById( blockID ); index = 0; x = number(block.style.left); // parseInt( block.style.left, 10 ); y = number(block.style.top); // parseInt( block.style.top, 10 ); xPos = new Array( x+10, x+20, x+30, x+40, x+50, x+60 ); yPos = new Array( y-10, y-20, y-30, y-40, y-50, y-60 ); clockStep = self.SetInterval( moveBlock(), timerInterval ); } --> </script> <style type="text/css" media="all"> <!-- @import url("styles.css"); #blockMenu { z-index: 0; width: 650px; height: 600px; background-color: blue; padding: 0; } #block1 { z-index: 30; position: relative; top: 10px; left: 10px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block2 { z-index: 30; position: relative; top: 50px; left: 220px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block3 { z-index: 30; position: relative; top: 50px; left: 440px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block4 { z-index: 30; position: relative; top: 0px; left: 600px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block1 a { display: block; width: 100%; height: 100%; } #block2 a { display: block; width: 100%; height: 100%; } #block3 a { display: block; width: 100%; height: 100%; } #block4 a { display: block; width: 100%; height: 100%; } #block1 a:hover { background-color: green; } #block2 a:hover { background-color: green; } #block3 a:hover { background-color: green; } #block4 a:hover { background-color: green; } #block1 a:active { background-color: yellow; } #block2 a:active { background-color: yellow; } #block3 a:active { background-color: yellow; } #block4 a:active { background-color: yellow; } --> </style>

    Read the article

  • How to play small sound file continuously in Silverlight?

    - by ash
    Hello, I have two questions regarding Silverlight's SoundPlay action and properties. My scenario is like: I have two story board: The first story board has an image and a sound file; when the silverlight application gets loaded, the sound starts to play automatically, but if someone clicks the image, the sound file will stop and the second storyboard will start with a new sound file. 1) My first question is how to stop the first sound file of first story board when the second story board starts with the second sound file. 2) My second question is how to play a sound file continuously; for example, in Silverlight we can play a story board continuously with RepeatBehavior="Forever"; but I cannot find a way to play my 10 second sound file forever or continuously. Note: I have attached a small XAML file to show what I am talking about; I am also stating that if instead of an image file, if there were a button, then I can stop the first music file after I click the button and start my second story board with a new sound file, but I would like to use image file instead of a button. Is it possible? If it is, how to do it? Therefore, please answer my following two questions or give big hint or website tutorial links on 1) How to stop the first sound file of first story board when the second story board starts with the second sound file ( When the clickable element is an image instead of a button) 2) How to play a 10 second sound file continuously? ............Code Snippet...................... XAML ............ <Grid x:Name="LayoutRoot" Background="Red"> <Button HorizontalAlignment="Left" Margin="212,0,0,111" VerticalAlignment="Bottom" Width="75" Content="Button" Click="onClick"/> <MediaElement x:Name="sound2_mp3" Height="0" HorizontalAlignment="Left" Margin="105,230,0,0" VerticalAlignment="Top" Width="0" Source="/sound2.mp3" Stretch="Fill"/> <MediaElement x:Name="sound1_mp1" Height="0" HorizontalAlignment="Left" Margin="190,164,0,0" VerticalAlignment="Top" Width="0" Source="/sound1.mp3" Stretch="Fill" AutoPlay="False"/> </Grid> ..................................................................................................................................................................................................................... using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace testPrj { public partial class MainPage : UserControl { public MainPage() { // Required to initialize variables InitializeComponent(); } private void onClick(object sender, System.Windows.RoutedEventArgs e) { Storyboard1.Stop(); sound2_mp3.Stop(); sound1_mp1.Play(); } } } ...................................................................................................

    Read the article

  • Why Won't My ASP.NET Hyperlink Work in IE?

    - by Giffyguy
    I'm making a very simple ad button system using ASP.NET 2.0 The advertisment is a 150x150px square that is displayed on "the r house." (Scroll down a little and you'll see the bright green "Angry Octopus" on the right side of the screen.) Now, I am not the administrator of "the r house." Instead, I am the administrator of angryoctopus.net Therefore, I don't have the ability to change the ad display code on a whim. So I gave "the r house" this snippet of code to display our ad nicely, while still allowing me to customize the back-end code on my end: <iframe src="http://www.angryoctopus.net/Content/Ad/150x150.aspx" frameborder="0" width="150" height="150" scrolling="no" style="padding: 0; margin: 0;"></iframe> You'll find this snippet in the page source to "the r house." On my side, the code looks like this: <asp:HyperLink runat="server" NavigateUrl="http://www.angryoctopus.net/" Target="_top"> <asp:Panel ID="pnlMain" runat="server" BackColor="#D1E231" style="padding: 0; margin: 0" Width="150" Height="150"> <asp:Image runat="server" ImageUrl="http://www.angryoctopus.net/Content/Ad/150x150.png" BorderStyle="None" style="padding: 0; margin: 0" /> </asp:Panel> </asp:HyperLink> ... and there's some insignificant back-end C# code for hit-counting. This looks all well and good from the code standpoint, as far as I can tell. Everything works in Firefox and Chrome. Also, everything appears to work in IE8 in all of my tests. I haven't tested IE7. But when you view "the r house" in IE(8) the hyperlink doesn't do anything, and the cursor doesn't indicate that the hyperlink is even there. Although you can see the target URL in the status bar. I've considered the fact that "the r house" uses XHTML 1.0 Strict could be causing problems, but that would probably effect Firefox and Chrome right? (My aspx pages use XHTML 1.0 Transitional) My only other theory is that some random CSS class could be applying a weird attribute to my iframe, but again I would expect that would effect Firefox and Chrome. Is this a security issue with IE? Does anyone know what part of the r house's website could be blocking the hyperlink in IE? And how can I get around this without having to hard code anything on the r house's website? Is there an alternative to iframe that would do the same job without requiring complicated scripting?

    Read the article

  • How to set an Image fit to width of ScrollViewer

    - by Raj
    I've Image placed inside a ScrollViewer. <ScrollViewer x:Name="imageScroller" Grid.Column="2" Margin="5" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible"> <Image x:Name="imageViewer" Cursor="Hand" RenderTransformOrigin="0,0" Margin="0"> <Image.LayoutTransform> <ScaleTransform ScaleX="{Binding Path=Zoom, Converter={StaticResource debugConverter}}" ScaleY="{Binding Path=Zoom, Converter={StaticResource debugConverter}}"/> </Image.LayoutTransform> </Image> </ScrollViewer> How do I zoom image like "fit-to-width" in document viewers to the size and height of ScrollViewer?

    Read the article

  • AdornerDecorator and tab stop issues

    - by Trev
    Hi, I am using IDataErrorInfo to validate and indicate errors in my text boxes. I am finding I have to tab once for the text box and once for the adornerdecorator. I have an error template: <ControlTemplate x:Key="ErrorTemplate"> <StackPanel KeyboardNavigation.IsTabStop="False" > <Border KeyboardNavigation.IsTabStop="False" BorderBrush="Red" BorderThickness="1" Padding="2" CornerRadius="2"> <AdornedElementPlaceholder KeyboardNavigation.IsTabStop="False" /> </Border> </StackPanel> </ControlTemplate> a textbox template: <Style x:Key="TextBoxInError" TargetType="{x:Type TextBox}"> <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="Margin" Value="0,5,0,5"/> <Setter Property="AllowDrop" Value="true"/> <Setter Property="HorizontalContentAlignment" Value="left"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type TextBox}"> <Grid KeyboardNavigation.IsTabStop="False" > <Border KeyboardNavigation.IsTabStop="False" x:Name="Border" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1" Padding="2" CornerRadius="2"> <ScrollViewer IsTabStop="False" Margin="0" x:Name="PART_ContentHost" Style="{DynamicResource SimpleScrollViewer}" Background="{TemplateBinding Background}"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="Validation.HasError" Value="true"> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors), Converter={StaticResource errorConverter}}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="Gray"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> and declare a text box like this: <AdornerDecorator KeyboardNavigation.IsTabStop="False" > <TextBox Margin="5,5,5,3" x:Name="txtName" IsEnabled="{Binding EditMode}" Validation.ErrorTemplate="{StaticResource ErrorTemplate}" Text="{Binding ApplicationName, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, ValidatesOnDataErrors=True}" Height="25" MaxLength="50" MaxLines="1" Style="{StaticResource TextBoxInError}"/> </AdornerDecorator> If the adorner is round one text box as above then I tab once to leave the text box and once to leave the 'adornment' (it seems) If I have the adorner around a stackpanel of text boxes then I tab once each for the text boxes then have to go back through all the 'adornments' in turn. When tabbing through the adornments the focus goes on the red border defined in the control template.. any ideas? thanks

    Read the article

  • Indent text left and right

    - by Elliott
    I am using the p tag to align text left and right on the same line using: .left { float: left; text-indent: 5px; margin-top: 0px; } .right { float: right; text-indent: 5px; margin-top: 0px; } <div id="content"> <p class="left">Left Text </p> <p class="right">Right Text </p> </div> The left text will indent by 5 pixels, the right text will not. I have tried -5px and just 5px, any ideas how I could do this? Thanks

    Read the article

  • siblings in jquery hide everything

    - by user2658615
    This is my html code : <div id="tabbase"> <ul> <li>a</li> <li>b</li> </ul> <div id="tabs-0"></div> <div id="tabs-1"> <div class="width50"> <h5>title1</h5> <div class="da-desc">a</div> <button>continue</button> </div> <div class="width50"> <h5>title2</h5> <div class="da-desc">b</div> <button>continue</button> </div> </div> </div> and this is CSS code : #tabbase { margin:16px; } #tabbase ul li { display:inline-block; margin:5px 0px 5px 0; background:rgb(224,224,224); padding:5px; border:1px solid rgb(153,153,153); cursor:pointer; } #tabs-0, #tabs-1 { border:1px solid rgb(153,153,153); background:rgb(255,255,255); padding:5px; margin:-5px 0 0 0; } #tabbase ul li.active { background:rgb(255,255,255) !important; } and this is jquery code : $(document).ready(function(e) { $("#tabs-1").hide(0); $("#tabbase ul li:first").addClass("active"); $("#tabbase ul li").click(function(e) { $(this).addClass("active"); $(this).siblings(this).removeClass("active"); count = $("#tabbase ul li").index(this); $('#tabs-'+count).slideDown(500).siblings(this).slideUp(500); }); }); so you can see that when you click on a tab , all tabs are gone and how can I fix this?

    Read the article

  • Script to dynamically change the source of an iframe tag

    - by Ukavi
    I want a code that will dynamically change the source of an iframe tag when a hyperlink is clicked for example I have one master page that should load content from other web pages using the iframe tag when a hyperlink is clicked but I don't know how to do it. Here is my code <html> <head> <title> </title> <style type="text/css"> #content{ margin-right:30%; margin-bottom: 10px; padding: 10px; border: 1px solid #000; margin-left:17%; background-repeat:no-repeat; width:686; height:640; } </style> <script type="text/javascript"> function hyperlinkChanger(hyperLink) { switch (hyperLink) { case "home": var url="home.html"; return url; break; case "about_Us": var url="about_us.html"; return url; break; case "contact_Us: var url="contact_us.html"; return url; break; } } </script> </head> <body> <a href="home.html" name="home" onClick="hyperlinkChanger('home')">Home</a> <br /> <a href="about_us.html" name="about_Us" onClick="hyperlinkChanger('about_Us')">About Us</a> <br /> <a href="contact_us.html" name="contact_Us" onClick="hyperlinkChanger('contact_Us')">Contact us</a> <br /> <div name="content"> <!--please help me write a method to call the output of the funcion hyperlinkChanger--> <iframe src="hyprlink function" width="600" height="300"> </iframe> </div> </body> </html>

    Read the article

  • css pagination for GridView

    - by nCdy
    my css : /* for greed view */ .pagination { font-size: 80%; } .pagination a { text-decoration: none; color: #15B; } .pagination a, .pagination span { display: block; float: left; padding: 0.3em 0.5em; margin-right: 5px; margin-bottom: 5px; } .pagination .current { background: #26B; color: #fff; border: solid 1px #AAE; } .pagination .current.prev, .pagination .current.next{ color:#999; border-color:#999; background:#fff; } but .pagination .current doesn't appears on current page and I can's see the border on it. What am I doing wrong ?

    Read the article

  • CSS Container not growing with grid?

    - by CmdrTallen
    Hi, I have a container background defined in CSS like this; .container { background:#fff; margin-left:auto; margin-right:auto; position: relative; width:970px; border:1px solid #000; padding:5px 10px; } The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz): But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges): I am sure its something I am doing wrong with the CSS. Any advice would be appreciated. EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid

    Read the article

  • Cross browser div alignment using CSS

    - by Misha Moroshko
    What is the easiest way to align a div whose position is relative horizontally and vertically using CSS ? The width and the height of the div is unknown, i.e. it should work for every div dimension and in all major browsers. I thought to make the horizontal alignment using: margin-left: auto; margin-right: auto; like I did here. Is this a good cross browser solution for horizontal alignment ? How could I do the vertical alignment ?

    Read the article

  • CSS Make one row the width of another

    - by gav
    I'm sure this is a fairly common problem but I'm new to CSS so I'm not sure how it's done. I tried searching for the issue but sometimes it's tricky to get the right keywords. I have a table the width of which I want to be constrained by a specific row. My table css is as follows; table { border: 1px solid #ccc; width: auto; margin-left: auto; margin-right: auto; } I have one row which contains cells for which I want the width to autofit and two rows of prose which currently force the table to take 100% width. How do I constrain the latter to have at most the autofit width of the first row? If tables aren't the way to go and this should be pure css and divs, how do you get one class to adopt the fixed but unknown width of another? Thanks, Gav

    Read the article

  • How to make overflow: hidden really hide content?

    - by tambourine
    Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much. Is there any way to avoid it without javascript? Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.

    Read the article

  • Why doesn't this html/css work in ie?

    - by hhj
    I am just trying to center a div on the page. It works in chrome but in i.e. the div is still on the left: <html> <head></head> <body> <div id="container" style="margin:0 auto; width:200px;"> test </div> </body> </html> Everything I've read has said that to center a block element, simply add margin:0 auto and specify a width, so I don't know why this isn't working. I am testing on IE 7.0.5730

    Read the article

  • Css, Content not staying inside border

    - by Davey
    I have the height of this div set to 100% but content keep overflowing out of it. Here is the page: http://cowgirlsbaking.com/membership CSS: #content { margin-left: auto; margin-right: auto; background-color: #FCF6E9; width:868px; height:100%; min-height: 650px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border: 10px solid #EB7CDB;

    Read the article

  • "Dynamic" CSS styling in asp .net?

    - by DeeMac
    I have the following inside a content place holder in my asp .net pages: <style type="text/css"> #sortable1 { list-style-type: none; margin: 0; padding: 0; zoom: 1; } #sortable1 li { margin: 3px; padding: 3px; width: 90%; border: 1px solid #000000; background: #000000; color: #FFFFFF; } #sortable1 li.highlightWorkflow { background: #FFFF00; color: #000000; } </style> I would ideally like to swap the #00000's for values held on the page, maybe in hidden fields. Is this possible?

    Read the article

  • Text goes goes into separate lines when using a percentage padding

    - by Haxed
    Hi, I have a small problem in html forms. When I give the following css, .row .section-1 label {/* Formatting all section-1 labels */ padding: 0 5px 0 10px; margin: 3px 0 0 0; display:block; } This is the output that I get : However when I edit the css to put padding in the form of a percentage: .row .section-1 label {/* Formatting all section-1 labels */ padding: 0 40% 0 80%; margin: 3px 0 0 0; display: block; } This is the output I get : I want to use percentages, however I want the look in the first image. Any ideas?? Thanks

    Read the article

  • Class not overwriting with addClass

    - by scatteredbomb
    I'm using jQuery's addClass to add a class to an tab so when clicked it'll change the class so it's obvious the tab is highlighted. My HTML <div id="mainNav"> <ul> <li id="LinktheBand" onclick="nav('theBand')">The Band</li> <li id="linkTheMusic" onclick="nav('theMusic')">The Music</li> My CSS #mainNav li { float:left; margin-right:5px; color:white; font-family:Tahoma; font-weight:bold; padding: 10px 8px 0px 8px; background:url('../images/transparent-65.png'); height:40px; height: 25px !important; border:1px solid #000; } #mainNav li:hover { float:left; margin-right:5px; color:white; font-family:Tahoma; font-weight:bold; padding: 10px 8px 0px 8px; background: #660000; height:40px; height: 25px !important; border:1px solid #660000; } .mainNavSelected { float:left; margin-right:5px; color:white; font-family:Tahoma; font-weight:bold; padding: 10px 8px 0px 8px; background: #660000; height:40px; height: 25px !important; border:1px solid #660000; } My Javascript function nav(a) { $('#'+a).show(); $('#Link'+a).addClass('mainNavSelected'); } This works properly, I check firebug and can see the class="mainNavSelected" is added, but the list element doesn't take any properties of the new class. Firebug lists all the class items for mainNavSelected, but has them all crossed out. What am i missing to replace the class of this element?

    Read the article

  • Styling HTML Submit Button (CSS, Different Browsers)

    - by jiewmeng
    i want to style a submit button which seems to be rendered abit differently in different browsers. <p id="lineInput"> <label for="task">Add a Task</label> <input type="text" name="task" id="task" /> <input type="submit" id="btnSubmit" value="Add" /> </p> #lineInput { ... position: relative; margin: 0px; } #btnSubmit { ... padding: 6px 8px; margin: 0; font: 1em/1em Hetilica; position: absolute; right: 2px; top: 3px; } notice the add button is too low on chrome when #btnSubmit has bottom: 3px. the issue if fixed in chrome with bottom: 5px but in Firefox will be too high

    Read the article

  • HTML: order of divs and a tags for href

    - by user2962389
    I'm busy with HTML and CSS and got stuck with this. I have created a button with :hover and :active options, which is centered on the page. Clicking on this button needs to lead to a website. My HTML is: <div> <a href="website"><div id="button">Text</div></a> </div> The CSS is: body, html { height: 100%; } a { text-decoration: none; } #button { text-transform: uppercase; font-size: 18px; text-align: center; padding: 1em 0.5em 0.8em; background-color: white; font-family: Myriad Pro, Source Sans Pro, Helvetica, Arial, sans-serif; color: #ff4700; cursor: pointer; width: 150px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #ff4700; margin-left: auto; margin-right: auto; margin-bottom: 50px; -webkit-transition: all .1s ease; -moz-transition: all .1s ease; -ms-transition: all .1s ease; -o-transition: all .1s ease; transition: all .1s ease; } #button:hover { background-color: #ff4700; color: white; border: 1px solid white; } #button:active { background-color: #cc3900; } The problem lies in the fact that the whole width of the page is clickable at the height of the button and not only the button itself that is 150px wide and is centered on the page. I think I have my divs mixed up and it needs other formatting and precedence, but I'm not sure. Thanks for your help! P.S. First time on StackOverflow, sorry if I formatted something wrong.

    Read the article

  • JSF composite component - weird behavior when trying to save state

    - by jc12
    I'm using Glassfish 3.2.2 and JSF 2.1.11 I'm trying to create a composite component that will take as parameters a string and a max number of characters and then will show only the max amount of characters, but it will have a "more" link next to it, that when clicked will expand the text to the full length and will then have a "less" link next to it to take it back to the max number of characters. I'm seeing some weird behavior, so I'm wondering if I'm doing something wrong. Here is my composite component definition: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:h="http://java.sun.com/jsf/html" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://primefaces.org/ui"> <composite:interface componentType="expandableTextComponent"> <composite:attribute name="name" required="true"/> <composite:attribute name="maxCharacters" required="true"/> <composite:attribute name="value" required="true"/> </composite:interface> <composite:implementation> <h:panelGroup id="#{cc.attrs.name}"> <h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) le cc.attrs.maxCharacters}"/> <h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and !cc.expanded}" style="margin-right: 5px;"/> <h:outputText value="#{cc.attrs.value}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and cc.expanded}" style="margin-right: 5px;"/> <p:commandLink actionListener="#{cc.toggleExpanded()}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters}" update="#{cc.attrs.name}"> <h:outputText value="#{__commonButton.more}..." rendered="#{!cc.expanded}"/> <h:outputText value="#{__commonButton.less}" rendered="#{cc.expanded}"/> </p:commandLink> </h:panelGroup> </composite:implementation> </html> And here is the Java component: @FacesComponent("expandableTextComponent") public class ExpandableTextComponent extends UINamingContainer { boolean expanded; public boolean isExpanded() { return expanded; } public void toggleExpanded() { expanded = !expanded; } } Unfortunately expanded is always false every time the toggleExpanded function is called. However if I change the composite component to the following then it works. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:composite="http://java.sun.com/jsf/composite" xmlns:h="http://java.sun.com/jsf/html" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:p="http://primefaces.org/ui"> <composite:interface componentType="expandableTextComponent"> <composite:attribute name="name" required="true"/> <composite:attribute name="maxCharacters" required="true"/> <composite:attribute name="value" required="true"/> </composite:interface> <composite:implementation> <h:panelGroup id="#{cc.attrs.name}"> <h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) le cc.attrs.maxCharacters}"/> <h:outputText value="#{fn:substring(cc.attrs.value, 0, cc.attrs.maxCharacters)}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and !cc.expanded}" style="margin-right: 5px;"/> <p:commandLink actionListener="#{cc.toggleExpanded()}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and !cc.expanded}" update="#{cc.attrs.name}" process="@this"> <h:outputText value="#{__commonButton.more}..."/> </p:commandLink> <h:outputText value="#{cc.attrs.value}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and cc.expanded}" style="margin-right: 5px;"/> <p:commandLink actionListener="#{cc.toggleExpanded()}" rendered="#{fn:length(cc.attrs.value) gt cc.attrs.maxCharacters and cc.expanded}" update="#{cc.attrs.name}" process="@this"> <h:outputText value="#{__commonButton.less}"/> </p:commandLink> </h:panelGroup> </composite:implementation> </html> If I place a breakpoint in the toggleExpanded function, it only gets called on the "more" link and not the "less" link. So the question is why doesn't it get called when I click on the "less" link? Shouldn't this code be equivalent to the code above? Is there a better way to save state in a component?

    Read the article

  • Jquery CPU usage

    - by nharry
    I am using Jquery to make an image scroll across my page horizontally. The only problem is that it uses a serious amount of cpu usage. Up to 100% on a single core laptop in firefox. What could cause this??? Jquery <script> jQuery(document).ready(function() { $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); }); </script> CSS .speech { /*position:fixed;*/ top:0; left:0px; height:400px; width:100%; z-index:-1; background:url(/images/speech.png) -300px -500px repeat-x; margin-right: auto; margin-left: auto; position: fixed; } HTML <div class="speech"></div>

    Read the article

  • How to restrict html body width when not displayed on iPhone?

    - by Curyous
    I have set up a web page to look good on the small screen of an iPhone, but when viewed on the desktop, and going right across the width of the browser, it looks terrible. Is there a way I can restrict the width to say, 480px when viewed on a big screen? I tried body { margin-left:auto; margin-right:auto; max-width:480px; } but it seems to just set the width at 480px, even on an iPhone on portrait mode.

    Read the article

  • Programmatically Setting ControlTemplate Item

    - by Robert
    I'm having trouble figuring out how to programmatically setting the "Stroke" of my arrow. I'm using these buttons in a menu bar and I want the one currently selected to have it's arrow change to green and all the others gray. <Style x:Key="FooterGrayButtonStyle" TargetType="{x:Type Button}"> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="MinHeight" Value="35" /> <Setter Property="FontSize" Value="16"/> <Setter Property="Margin" Value="0,5,10,5" /> <Setter Property="Foreground" Value="White" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Border x:Name="Bd" Background="#FF535A65" BorderBrush="Black" BorderThickness="1" CornerRadius="10"> <Path x:Name="arrow" Stretch="Fill" Stroke="#FFB1BB1C" StrokeThickness="5" HorizontalAlignment="Right" Margin="5" StrokeEndLineCap="Round" StrokeStartLineCap="Round" StrokeLineJoin="Miter" Width="13" Height="23" Data="M0,0 L1,1 0,2" /> </Border> <ContentPresenter HorizontalAlignment="Left" Margin="15,-2,30,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" RecognizesAccessKey="True"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="Bd" Property="Background" Value="#FFB1BB1C" /> <Setter Property="Stroke" TargetName="arrow" Value="White"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Stroke" TargetName="arrow" Value="#FFB7B7B7"/> <Setter Property="Foreground" Value="#FFB7B7B7"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>

    Read the article

< Previous Page | 48 49 50 51 52 53 54 55 56 57 58 59  | Next Page >