Search Results

Search found 17081 results on 684 pages for 'body background'.

Page 223/684 | < Previous Page | 219 220 221 222 223 224 225 226 227 228 229 230  | Next Page >

  • Change TextView without completely re-drawing layout?

    - by twk
    I've found that updating a text view every second in my app burns a lot of CPU. The textview is in a horizontal LinearLayout, which is in turn inside of a vertical LinearLayout. Switching to a RelativeLayout (as recommended to increase perf) is not an option right now (I tried to get that working originally, but it was too complicated). The horizontal LinearLayout has 3 elements. The outer ones are TextViews with a layout_weight of 0, and the middle one is a progress bar with a layout_weight of 1 to make it expand to take up most of the space. I'm changing the contents of the leftmost TextView every second So, is there a way to change the contents of the text view without re-drawing everything? Or, can I force the TextViews to use a fixed amount of space to simplify the layout. Other tips for speeding up a LinearLayout are greatly appreciated as well. For reference, here is my entire layout. The field I'm updating is the timeIn one. <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:text="Artist Name" android:id="@+id/curArtist" android:textSize="8pt" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:paddingTop="5dp"></TextView> <TextView android:text="Song Name" android:id="@+id/curSong" android:textSize="10pt" android:textStyle="bold" android:layout_below="@id/curArtist" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal"></TextView> <TextView android:text="Album Name" android:id="@+id/curAlbum" android:textSize="8pt" android:layout_below="@id/curSong" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal"></TextView> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@id/curAlbum" android:orientation="vertical"> <LinearLayout android:id="@+id/seekWrapper" android:layout_width="fill_parent" android:layout_height="wrap_content" android:minHeight="10dp" android:maxHeight="10dp" android:orientation="horizontal"> <TextView android:text="0:00" android:id="@+id/timeIn" android:textSize="4pt" android:paddingLeft="10dp" android:gravity="center_vertical" android:layout_weight="0" android:layout_gravity="left|center_vertical" android:layout_width="wrap_content" android:layout_height="fill_parent"></TextView> <ProgressBar android:layout_below="@id/curAlbum" android:id="@+id/progressBar" android:paddingLeft="7dp" android:paddingRight="7dp" android:layout_width="fill_parent" android:layout_height="fill_parent" android:maxHeight="10dp" android:minHeight="10dp" android:indeterminate="false" android:layout_weight="1" android:layout_gravity="center_horizontal|center_vertical" style="?android:attr/progressBarStyleHorizontal"></ProgressBar> <TextView android:text="0:00" android:id="@+id/timeLeft" android:paddingRight="10dp" android:textSize="4pt" android:layout_gravity="right|center_vertical" android:layout_weight="0" android:layout_width="wrap_content" android:layout_height="fill_parent"></TextView> </LinearLayout> <ImageView android:id="@+id/albumArt" android:layout_weight="1" android:padding="5dp" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/blank_album_art"></ImageView> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageButton android:id="@+id/prev" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:src="@drawable/button_prev" android:paddingLeft="10dp" android:background="@null"></ImageButton> <ImageButton android:id="@+id/playPause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/button_play" android:layout_weight="1" android:background="@null"></ImageButton> <ImageButton android:id="@+id/next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/button_next" android:layout_gravity="right" android:paddingRight="10dp" android:background="@null"></ImageButton> </LinearLayout> </LinearLayout> </RelativeLayout>

    Read the article

  • FBML is not rendered in Facebook App in iframe - please help

    - by Jakob
    I'm developing an Facebook Application in PHP. It's loaded as an iframe and not as FBML. The normal interaction with Facebook works. For example the following code gives the username: $facebook = new Facebook($config->appapikey, $config->appsecret); $user_id = $facebook->require_login($required_permissions = 'email'); echo $user->name; Where $user is my class in which the user-details are loaded from facebook. My document begins the following way: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <head><title>Appname</title> </head> <body> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/de_DE" type="text/javascript"></script> And ends likes this: <script type="text/javascript"> FB_RequireFeatures(['XFBML','CanvasUtil'], function(){ FB.init("<?php echo $config->appapikey; ?>", "/app/xd_receiver.htm"); FB.CanvasClient.startTimerToSizeToContent(); }); </script> </body> </html> Also the file xd_receiver.htm is loaded as I can see in Firebug. But my problem is that for example the request-form is not loaded. My code: <fb:serverFbml> <script type="text/fbml"> <fb:fbml> <fb:request-form method="post" action="<?php echo $config->site; ?>index.php" type="appname" invite="true" target="_top" content="content"> <fb:multi-friend-selector actiontext="text" rows="3" showborder="true" target="_top"/> </fb:request-form> </fb:fbml> </script> </fb:serverFbml> I can see the code with Firebug but the form ist not displayed by Facebook. 2 or 3 weeks ago it was displayed but in this time I had the tags </fb:fbml> </script> </fb:serverFbml> arround my complete text in the body. 2 weeks ago I had the the problem that nothing any more was displayed. After I removed the tags my app is displayed but not the form. I am searchign the web vor 1 week now and read many Threads about FBML and XFBML in Facebook but nothing worked for me. So thank you in advance for help.

    Read the article

  • How to change the border on a listboxitem while using a predefined template

    - by djerry
    Hey, I'm using one of the defined wpf themes for my application, so all my controls automatically are pimped according to that theme. Now i am filling a listbox with items (usercontrols), but not all of them should be visible at all time. But when i'm setting height to 0 (of usercontrol) or setting to invisible, i get a thick grey border of the listboxitems. Can someone help me override the border of the listboxitem or show me where in the template i need to change the border, cause i just can't find it. This is the part of the template for the listboxitem: <Style d:IsControlPart="True" TargetType="{x:Type ListBoxItem}"> <Setter Property="SnapsToDevicePixels" Value="true"/> <Setter Property="OverridesDefaultStyle" Value="false"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListBoxItem}"> <ControlTemplate.Resources> <Storyboard x:Key="HoverOn"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="HoverOff"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SelectedOn"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SelectedOff"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SelectedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Grid Background="{TemplateBinding Background}" Margin="1,1,1,1" SnapsToDevicePixels="true" x:Name="grid"> <Rectangle x:Name="Background" IsHitTestVisible="False" Fill="{StaticResource SelectedBackgroundBrush}" RadiusX="0"/> <Rectangle x:Name="SelectedRectangle" IsHitTestVisible="False" Opacity="0" Fill="{StaticResource NormalBrush}" RadiusX="0"/> <Rectangle x:Name="HoverRectangle" IsHitTestVisible="False" Fill="{StaticResource HoverBrush}" RadiusX="0" Opacity="0"/> <ContentPresenter Margin="5,3,3,3" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" x:Name="contentPresenter"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource HoverOn}"/> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource HoverOff}"/> </Trigger.ExitActions> </Trigger> <Trigger Property="IsSelected" Value="true"> <Trigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource SelectedOn}"/> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource SelectedOff}"/> </Trigger.ExitActions> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/> </Style>

    Read the article

  • Storyboard apply to all labels

    - by ThitoO
    Hi everyone ! I whant to apply a little storyboard to a collection of labels in my window. My storyboard is like that : <Storyboard x:Key="Storyboard1" AutoReverse="True" RepeatBehavior="Forever"> <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="label" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FFFFFF"/> </ColorAnimationUsingKeyFrames> </Storyboard> I have a window composed of that : <Grid Background="#FF000000"> <Viewbox HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"> <UniformGrid x:Name="grid" Background="#FF000000" /> </Viewbox> </Grid> When I want to start my storyboard I do that : Storyboard.SetTarget( _stb, myLabel ); _stb.Begin(); where _std is my storyboard loaded by the window's resources. The animation works fine, but on all labels (not only the one I want). I tried to switch SetTarget by SetTargetName but labels are created into my window by the constructor and names can not be founded when I try "SetTargetName". Do you have any ideas ? Thanks :) ------------ Edit : We asked me to be more descriptive -------------------------------------------------------------------- Label are not created directly in the xaml, they are created by the constructor of the window : public SpellerWindow(IKeyboard keyboard, int colomnNumber, SolidColorBrush background, SolidColorBrush foreground ) { InitializeComponent(); grid.Columns = colomnNumber; int i = 0; foreach( IKey key in keyboard.Zones.Default.Keys ) { Label lb = new Label(); lb.Foreground = foreground; lb.Name = "label"+(i++).ToString(); lb.Content = key.ActualKeys[keyboard.CurrentMode].UpLabel; lb.HorizontalAlignment = HorizontalAlignment.Center; lb.VerticalAlignment = VerticalAlignment.Center; Viewbox box = new Viewbox(); box.Stretch = Stretch.Fill; box.Child = lb; box.Tag = key; grid.Children.Add( box ); } } Animations are started by an event handler : void Highlighter_StartAnimation( object sender, HiEventArgs e ) { Storyboard stb; if( !_anims.TryGetValue( e.Step.Animation.Name, out stb ) ) { stb = (Storyboard)_window.FindResource( e.Step.Animation.Name ); _anims.Add( e.Step.Animation.Name, stb ); } DoAnimations( _zones[e.Step.Zone], stb ); } Finally, animations are started by DoAnimations : void DoAnimations( List<Label> labels, Storyboard stb ) { foreach( Label lb in labels ) { Storyboard.SetTarget( stb, lb ); stb.Begin(); } } I want to highlight a collection of labels, but all labels are flashing. I don't know why, but I try to create a label into the Xaml directly, and set a Storyboard.TargetName (bound to the name of the label) in the Xaml of the storyboard. And it's working ... Now you know everything. Thanks for you help :)

    Read the article

  • java.lang.RuntimeException: Unable to start activity ComponentInfo cannot be cast to android.widget.ZoomControls

    - by Hwl
    I'm new to android development, hope you all can help me. I got this androidVNC viewer source code from internet. When i'm running the androidVNC application in the emulator, it will exit automatically then i get following errors in LogCat. Can anyone one help me? Thanks. FATAL EXCEPTION: main java.lang.RuntimeException: Unable to start activity ComponentInfo{android.androidVNC/android.androidVNC.VncCanvasActivity}: java.lang.ClassCastException: com.antlersoft.android.zoomer.ZoomControls cannot be cast to android.widget.ZoomControls at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1955) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1980) at android.app.ActivityThread.access$600(ActivityThread.java:122) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1146) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:137) at android.app.ActivityThread.main(ActivityThread.java:4340) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:511) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551) at dalvik.system.NativeStart.main(Native Method) Caused by: java.lang.ClassCastException: com.antlersoft.android.zoomer.ZoomControls cannot be cast to android.widget.ZoomControls at android.androidVNC.VncCanvasActivity.onCreate(VncCanvasActivity.java:585) at android.app.Activity.performCreate(Activity.java:4465) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1049) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1919) ... 11 more This is the ZoomControls java file: package com.antlersoft.android.zoomer; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.animation.AlphaAnimation; import android.widget.ImageButton; import android.widget.LinearLayout; import android.widget.ZoomButton; public class ZoomControls extends LinearLayout { private final ZoomButton mZoomIn; private final ZoomButton mZoomOut; private final ImageButton mZoomKeyboard; public ZoomControls(Context context) { this(context, null); } public ZoomControls(Context context, AttributeSet attrs) { super(context, attrs); setFocusable(false); LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); inflater.inflate(R.layout.zoom_controls, this, // we are the parent true); mZoomIn = (ZoomButton) findViewById(R.id.zoomIn); mZoomOut = (ZoomButton) findViewById(R.id.zoomOut); mZoomKeyboard = (ImageButton) findViewById(R.id.zoomKeys); } public void setOnZoomInClickListener(OnClickListener listener) { mZoomIn.setOnClickListener(listener); } public void setOnZoomOutClickListener(OnClickListener listener) { mZoomOut.setOnClickListener(listener); } public void setOnZoomKeyboardClickListener(OnClickListener listener) { mZoomKeyboard.setOnClickListener(listener); } /* * Sets how fast you get zoom events when the user holds down the * zoom in/out buttons. */ public void setZoomSpeed(long speed) { mZoomIn.setZoomSpeed(speed); mZoomOut.setZoomSpeed(speed); } @Override public boolean onTouchEvent(MotionEvent event) { /* Consume all touch events so they don't get dispatched to the view * beneath this view. */ return true; } public void show() { fade(View.VISIBLE, 0.0f, 1.0f); } public void hide() { fade(View.GONE, 1.0f, 0.0f); } private void fade(int visibility, float startAlpha, float endAlpha) { AlphaAnimation anim = new AlphaAnimation(startAlpha, endAlpha); anim.setDuration(500); startAnimation(anim); setVisibility(visibility); } public void setIsZoomInEnabled(boolean isEnabled) { mZoomIn.setEnabled(isEnabled); } public void setIsZoomOutEnabled(boolean isEnabled) { mZoomOut.setEnabled(isEnabled); } @Override public boolean hasFocus() { return mZoomIn.hasFocus() || mZoomOut.hasFocus(); } } This is the zoom_controls XML file: <merge xmlns:android="http://schemas.android.com/apk/res/android"> <ZoomButton android:id="@+id/zoomOut" android:background="@drawable/btn_zoom_down" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageButton android:id="@+id/zoomKeys" android:background="@android:drawable/ic_dialog_dialer" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ZoomButton android:id="@+id/zoomIn" android:background="@drawable/btn_zoom_up" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </merge>

    Read the article

  • In WPF, Selecting ItemContainerStyle based on data bound content

    - by Bart Roozendaal
    In #WPF you have ItemTemplateSelectors. But, can you also select an ItemContainerStyle based on the datatype of a bound object? I am databinding a scatterview. I want to set some properties of the generated ScatterViewItems based on the object in their DataContext. A mechanism similar to ItemTemplateSelector for styles would be great. Is that at all possible? I am now binding to properties in the objects that I am displaying to get the effect, but that feels like overhead and too complex (and most importantly, something that our XU designers can't do by themselves). This is the XAML that I am using now. Your help is greatly appreciated. <s:ScatterView x:Name="topicsViewer"> <s:ScatterView.ItemTemplateSelector> <local:TopicViewerDataTemplateSelector> <DataTemplate DataType="{x:Type mvc:S7VideoTopic}"> <Grid> <ContentPresenter Content="{Binding MediaElement}" /> <s:SurfaceButton Visibility="{Binding MailToVisible}" x:Name="mailto" Tag="{Binding Titel}" Click="mailto_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" Width="62" Height="36"> <Image Source="/Resources/MailTo.png" /> </s:SurfaceButton> <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Height="32"> <s:SurfaceButton Tag="{Binding MediaElement}" x:Name="btnPlay" Click="btnPlay_Click"> <Image Source="/Resources/control_play.png" /> </s:SurfaceButton> <s:SurfaceButton Tag="{Binding MediaElement}" x:Name="btnPause" Click="btnPause_Click"> <Image Source="/Resources/control_pause.png" /> </s:SurfaceButton> <s:SurfaceButton Tag="{Binding MediaElement}" x:Name="btnStop" Click="btnStop_Click"> <Image Source="/Resources/control_stop.png" /> </s:SurfaceButton> </StackPanel> </Grid> </DataTemplate> <DataTemplate DataType="{x:Type mvc:S7ImageTopic}"> <Grid> <ContentPresenter Content="{Binding Resource}" /> <s:SurfaceButton Visibility="{Binding MailToVisible}" x:Name="mailto" Tag="{Binding Titel}" Click="mailto_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Background="Transparent" Width="62" Height="36"> <Image Source="/Resources/MailTo.png" /> </s:SurfaceButton> </Grid> </DataTemplate> <DataTemplate DataType="{x:Type local:Kassa}"> <ContentPresenter Content="{Binding}" Width="300" Height="355" /> </DataTemplate> </local:TopicViewerDataTemplateSelector> </s:ScatterView.ItemTemplateSelector> <s:ScatterView.ItemContainerStyle> <Style TargetType="s:ScatterViewItem"> <Setter Property="MinWidth" Value="200" /> <Setter Property="MinHeight" Value="150" /> <Setter Property="MaxWidth" Value="800" /> <Setter Property="MaxHeight" Value="700" /> <Setter Property="Width" Value="{Binding DefaultWidth}" /> <Setter Property="Height" Value="{Binding DefaultHeight}" /> <Setter Property="s:ScatterViewItem.CanMove" Value="{Binding CanMove}" /> <Setter Property="s:ScatterViewItem.CanScale" Value="{Binding CanScale}" /> <Setter Property="s:ScatterViewItem.CanRotate" Value="{Binding CanRotate}" /> <Setter Property="Background" Value="Transparent" /> </Style> </s:ScatterView.ItemContainerStyle> </s:ScatterView> Bart Roozendaal, Sevensteps

    Read the article

  • iPhone UIWebView local resources using Javascript and handling onorientationChange

    - by Dougnukem
    I'm trying to server HTML Javascript and CSS content from an iPhone application's local resources, and I'm having trouble handling onOrientationChange events and including external Javascript. I seem to be able to link in CSS properly but not javascript. I'm trying to use the following example of handling onOrientationChange (How to build an iPhone website) but I'm serving the webpage from my app's NSBundle mainBundle. I tried attaching a javascript function to body.onorientationchange and to window.onorientationchange but neither work when served from UIWebView locally (or remotely), but it works if I'm using the iPhone Safari. <!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>How to build an iPhone website</title> <meta name="author" content="will" /> <meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" /> <meta name="description" content="Welcome to engege interactive on the iPhone!" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <link rel="apple-touch-icon" href="images/template/engage.png"/> <style type="text/css"> @import url("iphone.css"); </style> <!-- <script type="text/javascript" src="orientation.js"></script> --> <script type="text/javascript"> function updateOrientation(){ try { var contentType = "show_normal"; switch(window.orientation){ case 0: contentType = "show_normal"; break; case -90: contentType = "show_right"; break; case 90: contentType = "show_left"; break; case 180: contentType = "show_flipped"; break; } document.getElementById("page_wrapper").setAttribute("class", contentType); //alert('ORIENTATION: ' + contentType); } catch(e) { alert('ERROR:' + e.message); } } window.onload = function initialLoad(){ try { loaded(); updateOrientation(); } catch(e) { alert('ERROR:' + e.message); } } function loaded() { document.getElementById("page_wrapper").style.visibility = "visible"; } </script> </head> <body onorientationchange="updateOrientation();"> <div id="page_wrapper"> <h1>Engage Interactive</h1> <div id="content_left"> <p>You are now holding your phone to the left</p> </div> <div id="content_right"> <p>You are now holding your phone to the right</p> </div> <div id="content_normal"> <p>You are now holding your phone upright</p> </div> <div id="content_flipped"> <p>This doesn't work yet, but there is a chance apple will enable it at some point, so I've put it in anyway. You would be holding your phone upside down if it did work.</p> </div> </div> </body> </html>

    Read the article

  • CSS Fluid Grid Layout Problem

    - by Fuego DeBassi
    I have a max-width em based container for my layout. Within it I have many floated fixed width boxes, at 230px to be exact. At the max-width the container will expand to 90em's. This fit's 6 boxes per line perfectly. As the window sizes down and boxes are bumped to lower rows it leaves an ugly gap with the navigation above. I would like to force the container of the boxes to center them at all times. To illustrate: At full width: http://cl.ly/7393a462f44b8315aaba At smaller width: http://cl.ly/ff48a18d39c4f57c3513 How I would like smaller width to work: http://cl.ly/ae9c3fd04df515253b2d (Photoshoped) My markup looks like this: Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. Biodesign Fusce massa felis, laoreet eu elementum sit amet, aliquam ut magna. Etiam et tellus in nisl vehicula ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean nulla ante. My CSS, is: div#bricks { margin:0 auto; background:red; width:100%; } div.brick { background:#181c21; width:230px; margin:0 5px 10px 5px; position:relative; float:left; } div.brick img { background:#666; max-width:230px; } The #bricks is inside a #main, which looks like: div#main { margin:0 auto; padding:0 50px; position:relative; max-width:90em; } Would love some ideas!

    Read the article

  • ASP.NET Send Image Attachment With Email Without Saving To Filesystem

    - by KGO
    I'm trying to create a form that will send an email with an attached image and am running into some problems. The form I am creating is rather large so I have created a small test form for the purpose of this question. The email will send and the attachment will exist on the email, but the image is corrupt or something as it is not viewable. Also.. I do not want to save the image to the filesystem. You may think it is convoluted to take the image file from the fileupload to a stream, but this is due to the fact that the real form I am working on will allow multiple files to be added through a single fileupload and will be saved in session, thus the images will not be coming from the fileupload control directly on submit. File: TestAttachSend.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestAttachSend.aspx.cs" Inherits="TestAttachSend" %> <!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 runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <h1>Send Email with Image Attachment</h1> Email Address TO: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br /> Attach JPEG Image: <asp:FileUpload ID="fuImage" runat="server" /><br /> <br /> <asp:Button ID="btnSend" runat="server" Text="Send" onclick="btnSend_Click" /><br /> <br /> <asp:label ID="lblSent" runat="server" text="Image Sent!" Visible="false" EnableViewState="false"></asp:label> </div> </form> </body> </html> File: TestAttachSend.aspx.cs using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Net.Mail; using System.IO; public partial class TestAttachSend : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnSend_Click(object sender, EventArgs e) { if (fuImage.HasFile && fuImage.PostedFile.ContentType == System.Net.Mime.MediaTypeNames.Image.Jpeg) { SmtpClient emailClient = new SmtpClient(); MailMessage EmailMsg = new MailMessage(); EmailMsg.To.Add(txtEmail.Text.Trim()); EmailMsg.From = new MailAddress(txtEmail.Text.Trim()); EmailMsg.Subject = "Attached Image"; EmailMsg.Body = "Image is attached!"; MemoryStream imgStream = new MemoryStream(); System.Drawing.Image img = System.Drawing.Image.FromStream(fuImage.PostedFile.InputStream); string filename = fuImage.PostedFile.FileName; img.Save(imgStream, System.Drawing.Imaging.ImageFormat.Jpeg); EmailMsg..Attachments.Add(new Attachment(imgStream, filename, System.Net.Mime.MediaTypeNames.Image.Jpeg)); emailClient.Send(EmailMsg); lblSent.Visible = true; } } }

    Read the article

  • The weirdest css issue I have ever seen

    - by jasondavis
    Below I have 2 css codes for a div, please note that the first one does not even have a div on the page or ANYTHING with it's name on it. I can also rename it to anything. Now where the weird part comes in. The second bit of code below has a width of 520px, the only way that the div on the page will be 520px is if I leave the css code thats above that one, the 1st one with no existing div on the page HAS to be on the page for the second css code to work, At first I thought it has to be a browser caching issue, so I clear my cache and that does nothing, I then try 2 other browsers and they all have the same result. I add the 1st bit of code into the page and the second bit works, I take the first bit away and the second bit does not work. AM i overlooking something here? .commentwrappsdfsde2{width:950px;margin:0 0;padding:0;} .commentwrapper{width:520px;margin-right:auto;margin-left:auto;} Here is the whole page code <style> <!-- css for user photos--> div.imageSub img.female { border-top: 1px solid #FF3399; } div.imageSub img.male { border-top: 1px solid #3399FF; } div.imageSub img { z-index: 1; margin: 0; display: block; } div.imageSub div { position: relative; margin: -15px 0 0; padding: 5px; height: 5px; line-height: 4px; text-align: center; overflow: hidden; font-family:Trebuchet MS,Helvetica,sans-serif; font-size:12px; font-weight: bold; } div.imageSub div.blackbg { z-index: 2; background-color: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); opacity: 0.5; } div.imageSub div.label { z-index: 3; color: white; } <!-- end photo block--> /* Comments */ .commentwrappsdfsde2{width:950px;margin:0 0;padding:0;} .commentwrapper{width:520px;margin-right:auto;margin-left:auto;} #comments ol.commentlist li { list-style-type:none; padding:20px; background:none; } #comments ol.commentlist li.thread-even { background:#f6f6f6; border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; } #comments ul.children li ul.children,#comments .commentlist{padding:0;} </style> <div class="commentwrapper"> <div id="comments"> <ol class="commentlist"> <li class="comment thread-even " > Comment 1 </li> </ol> </div> </div>

    Read the article

  • multiple-inheritance substitution

    - by Luigi
    I want to write a module (framework specific), that would wrap and extend Facebook PHP-sdk (https://github.com/facebook/php-sdk/). My problem is - how to organize classes, in a nice way. So getting into details - Facebook PHP-sdk consists of two classes: BaseFacebook - abstract class with all the stuff sdk does Facebook - extends BaseFacebook, and implements parent abstract persistance-related methods with default session usage Now I have some functionality to add: Facebook class substitution, integrated with framework session class shorthand methods, that run api calls, I use mostly (through BaseFacebook::api()), authorization methods, so i don't have to rewrite this logic every time, configuration, sucked up from framework classes, insted of passed as params caching, integrated with framework cache module I know something has gone very wrong, because I have too much inheritance that doesn't look very normal.Wrapping everything in one "complex extension" class also seems too much. I think I should have few working togheter classes - but i get into problems like: if cache class doesn't really extend and override BaseFacebook::api() method - shorthand and authentication classes won't be able to use the caching. Maybe some kind of a pattern would be right in here? How would you organize these classes and their dependencies? EDIT 04.07.2012 Bits of code, related to the topic: This is how the base class of Facebook PHP-sdk: abstract class BaseFacebook { // ... some methods public function api(/* polymorphic */) { // ... method, that makes api calls } public function getUser() { // ... tries to get user id from session } // ... other methods abstract protected function setPersistentData($key, $value); abstract protected function getPersistentData($key, $default = false); // ... few more abstract methods } Normaly Facebook class extends it, and impelements those abstract methods. I replaced it with my substitude - Facebook_Session class: class Facebook_Session extends BaseFacebook { protected function setPersistentData($key, $value) { // ... method body } protected function getPersistentData($key, $default = false) { // ... method body } // ... implementation of other abstract functions from BaseFacebook } Ok, then I extend this more with shorthand methods and configuration variables: class Facebook_Custom extends Facebook_Session { public funtion __construct() { // ... call parent's constructor with parameters from framework config } public function api_batch() { // ... a wrapper for parent's api() method return $this->api('/?batch=' . json_encode($calls), 'POST'); } public function redirect_to_auth_dialog() { // method body } // ... more methods like this, for common queries / authorization } I'm not sure, if this isn't too much for a single class ( authorization / shorthand methods / configuration). Then there comes another extending layer - cache: class Facebook_Cache extends Facebook_Custom { public function api() { $cache_file_identifier = $this->getUser(); if(/* cache_file_identifier is not null and found a valid file with cached query result */) { // return the result } else { try { // call Facebook_Custom::api, cache and return the result } catch(FacebookApiException $e) { // if Access Token is expired force refreshing it parent::redirect_to_auth_dialog(); } } } // .. some other stuff related to caching } Now this pretty much works. New instance of Facebook_Cache gives me all the functionality. Shorthand methods from Facebook_Custom use caching, because Facebook_Cache overwrited api() method. But here is what is bothering me: I think it's too much inheritance. It's all very tight coupled - like look how i had to specify 'Facebook_Custom::api' instead of 'parent:api', to avoid api() method loop on Facebook_Cache class extending. Overall mess and ugliness. So again, this works but I'm just asking about patterns / ways of doing this in a cleaner and smarter way.

    Read the article

  • How to fix width of DIV that contains floated elements?

    - by joe
    I have a DIV container with several inner DIVs layed out by floating them all left. The inner DIVs may change width on certain events, and the containing DIV adjusts accordingly. I use float:left in the container to keep it shrunk to the width of the inner divs. I use float:left in the inner divs so the layout is clean even when their contents change. The catch is that I want the DIV container width and height to remain constant, UNLESS a particular event causes a change to the inner widths. Conceptually I want to use float on the inners for the layout benefit, but then I want to "fix" them so they don't float around. So if the container is 700px wide, I want it to remain so even if the user narrows the browser window. I'd like the container, and it's internal DIVs to just be clipped by the browser window. I sense this can all be done nicely in CSS, I just can't quite figure out how. I'm not averse to adding another container if necessary... Since the only desired layout changes are event-based, I am also willing to use a bit of JS. But is this necessary? (And I'm still not sure I know what to modify: container dimensions? inner floatiness? other?) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> #canvas { overflow:auto; /* for clearing floats */ } #container { float:left; /* so container shrinks around contained divs */ border:thin solid blue; } .inner { float:left; /* so inner elems line up nicely w/o saying fixed coords */ padding-top:8px; padding-bottom:4px; padding-left:80px; padding-right:80px; } #inner1 { background-color:#ffdddd; } #inner2 { background-color:#ddffdd; } #inner3 { background-color:#ddddff; } </style> </head> <body> <div id="canvas"> <div id="container"> <div id="inner1" class="inner"> inner 1 </div> <div id="inner2" class="inner"> inner 2 </div> <div id="inner3" class="inner"> inner 3 </div> </div> </div> cleared element </body> </html>

    Read the article

  • Problem with JS Selectbox Function

    - by Thomas
    I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed. My question is two part: 1) How do I write a conditional function that specifically targets the selected option 2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box? Here is the function I was working on for the first option: $(document).ready(function(){ var subTableDiv = $("div.subTableDiv"); var subTableDiv1 = $("div.subTableDiv1"); var subTableDiv2 = $("div.subTableDiv2"); subTableDiv.hide(); subTableDiv1.hide(); subTableDiv2.hide(); var selectmenu=document.getElementById("customfields-s-18-s"); selectmenu.onchange=function(){ //run some code when "onchange" event fires var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu" if (chosenoption.value ="Co-Op"){ subTableDiv1.slideDown("medium"); } } }); Html: <tr> <div> <select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" > <option value="Condominium"> Condominium</option> <option value="Co-Op"> Co-Op</option> <option value="Condop"> Condop</option> </select> </div> </tr> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div> </td> </tr> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div> </td> </tr> <tr class="subTable"> <td colspan="2"> <div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div> </td> </tr>

    Read the article

  • WPF: Updating visibility of controls not updating the screen

    - by Brad McBride
    I will preface this by stating that I am new to WPF programming and may be making multiple errors. Any insight that can be provided to help me improve in my skills are greatly appreciated. I am working with a WPF application and am looping through a list of objects that contain properties that describe a document that should be built on the fly and automatically printed. I am attempting to display a small grid in the interface that shows the document being built before it is printed. This serves two purposes: one, it allows the user to see work being done by the application. Two, it renders the items on the screen so that I can then have something to actually print since WPF appears to not be able to load an image for printing dynamicaly without displaying it on the screen. In my code, I am setting the various elements in the grid and setting the visibility to visible. However, the UI is not updating and the printed document doesn't look as intended since the image never shows up on the screen. Here is the XAML that I have set up <Grid x:Name="LayoutRoot" Background="Black"> <Grid Name="previewGrid" Grid.Row="1" Grid.Column="1" Background="White" Visibility="Hidden"> <Canvas Name="pageCanvas" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid Name="pageGrid" Width="163" Height="211"> <Grid.ColumnDefinitions> <ColumnDefinition Width="81.5"></ColumnDefinition> <ColumnDefinition Width="81.5"></ColumnDefinition> </Grid.ColumnDefinitions> <TextBlock Grid.Column="0" Name="copyright" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Bottom"></TextBlock> <Image Name="pageImage" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Image> </Grid> </Canvas> .....canvas for pages 2-4 not shown but structure is the same as for pageGrid..... </Grid> </Grid> </Window> Here is the code behind that is supposed to set the elements. previewGrid.Visibility = Windows.Visibility.Visible pageURI = New Uri(pageCollection(i).iamgeURL, UriKind.Absolute) pageGrid.Visibility = Windows.Visibility.Visible bmp.BeginInit() bmp.StreamSource = getCachedURLStream(cardURI) bmp.EndInit() pageImage.Source = bmp copyright.Text = copyrightText cardPreviewGrid.UpdateLayout() ' More code that prints the visual element pageGrid previewGrid.Visibility = Windows.Visibility.Hidden The code in codebehind loops through a number of times depending on how many different documents the user prints. Basically it builds a visual element for a page, prints an XPS version of it and then builds the next page and prints it, etc. Once all pages have been processed, the job is actually sent to the printer. The only purpose of this application is to let the user print these documents so there is not other task that they can do in the application while the documents print. I thought that putting this task in a background thread would help to update the UI but since I am trying to manipulate items directly on the UI thread it would appear that this option won't work for me. What am I doing wrong here and how can I improve the code so that I can get the behavior that I am trying to achieve?

    Read the article

  • Silverlight Image Loading Question

    - by Matt
    I'm playing around with Silverlight Images and a listbox. Here's the scenario. Using WCF I grab some images out of my database and, using a custom class, add items to a listbox. It's working great right now. The images load and appear in the listbox, just like I want them to. I want to refine and improve my control just a little more so here's what I've done. <ListBox x:Name="lbMedia" Background="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <c:WrapPanel></c:WrapPanel> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <im:MediaManagerItem></im:MediaManagerItem> </DataTemplate> </ItemsControl.ItemTemplate> </ListBox> Just a simple listbox. The datatemplate is a custom control and literally it contains a contentpresenter, nothing more. Now the class that I use as the ItemSource has a Source property. Here's what it looks like. private UIElement _LoadingSource; private UIElement _Source; public UIElement Source { get { if( _Source == null ) { LoadMedia(); return new LoadingElement(); } return _Source; } set { if( !( value is Image ) && !( value is MediaElement ) ) throw new Exception( "Media Source must be an Image or MediaElement" ); _Source = value; NotifyPropertyChanged( "Source" ); } } Essentially, on the get I check if the image/video has been loaded from the server. If it hasn't I return a loading control, then I proceed to load my image. Here's the code for my LoadMedia method. private void LoadMedia() { if( _Media != null && _Media.MediaId > 0 ) { //load the media BackgroundWorker mediaLoader = new BackgroundWorker(); mediaLoader.DoWork += mediaLoader_DoWork; mediaLoader.RunWorkerCompleted += mediaLoader_RunWorkerCompleted; mediaLoader.RunWorkerAsync(); } } void mediaLoader_RunWorkerCompleted( object sender, RunWorkerCompletedEventArgs e ) { if(_LoadingSource != null) Source = _LoadingSource; } void mediaLoader_DoWork( object sender, DoWorkEventArgs e ) { string url = App.siteUrl + "download.ashx?MediaId=" + _Media.MediaId; SmartDispatcher.BeginInvoke( () => { Image img = new Image(); img.Source = new BitmapImage( new Uri( url, UriKind.Absolute ) ); _LoadingSource = img; } ); } So as the code goes, I create a new image element, and set the Uri. The images that I'm downloading take about 2-5 seconds to download. Now for the problem / fine tuning. Right now my code will check if the source is null and if it is, return a loading element, and run the background worker to get the image. Once the background worker finishes, set the source to the new downloaded image. I want to be able to set the Source property AFTER the image has fully downloaded. Right now my loading element appears for a brief second, then there's nothing for 2-5 seconds until the image finishes downloading. I want the loading elements to stick around until the image is completely ready but I'm having troubles doing this. I've tried adding a a listener to the ImageOpened event and update the Source property then, but it doesn't work. Thanks in advance.

    Read the article

  • adv. styling list with css

    - by Ayrton
    Hi I need to style a regular html list like the following picture: as you see each each list item has a padding on the sides and a top&bottom border. When hovered the border has a width of 100% of the <ul> item. Now the problem actually is: when you give each <li> element a top & bottom border I have a border of 2 px between each element (bottom border from the first element and the top border from the second element), I don't want that however I do not know any solution for this. my html: <div id="tab_top" class="tab"> <div class="bottom"> <div class="cont"> <ul> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> <li><a href="#">Here’s a Sample Post <span class="ct">32</span></a></li> </ul> </div> </div> </div> my css: #tabs .tab div.cont ul li a{line-height:30px; height:30px; color:#3ca097; display:block; padding-left:11px; padding-right:13px; width:259px;} #tabs .tab div.cont ul li a span.ct{float:right;background:url(images/count_comments.gif) no-repeat left top; height:13px; padding-left:16px; margin-top:10px; line-height:12px;} #tabs .tab div.cont ul li a:hover{color:#fff; background-color:#6fd2c8; border-top:1px solid #7db9b2; border-bottom:1px solid #7db9b2; height:28px; line-height:28px;} #tabs .tab div.cont ul li a:hover span.ct{background-position:left bottom; color:#23665f; margin-top:9px;} I would be pleased if you can help me Yours truthfully

    Read the article

  • HTML: Place an image on top of another one

    - by Dimitris Baltas
    Inside a div, there is a picture that should have 10px margin in all directions from the DIV's border. On the left bottom corner of the picture there is an about-image. The picture is only displayed when its loaded in the DOM through jquery. The problem is that the existence of the about-image dislocates the picture downwards as many pixels as the height of the about-image. I am looking for the cleanest possible alternative to keep the picture inside the DIV and still display the about-image on top of it. Setting the picture as background will not work since i need the picture to load at once. Any improvement on the #about css would be greatly appreciated. Below is a full html page that reproduces the issue <html> <head> <title>Troubleshooting :: align the main picture inside the DIV</title> <style type="text/css"> html, body { background-color: #000000; } #about { z-index:2; position:relative; top:82%; left:3%; } #pic { width:100%; height:96%; } #main-content-image { height:100%; margin-right:10px; margin-left:10px; margin-top:10px; margin-bottom:10px; } #main-content { height:490px; border-width: 1px; border-style: solid; border-color: #777777; } #main-content-image.loading { background: url(http://farros.gr/images/ajax-loader2.gif) no-repeat center center; } a { text-decoration: none; text-decoration: none; color: #868686; outline:none; } .hide { display:none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function () { var img = new Image(); $(img).load(function () { $(this).hide(); $(this).width('100%'); $(this).height('96%'); $('#main-content-image').removeClass('loading').append(this); $(this).fadeIn(); }).error(function () { // notify the user that the image could not be loaded }).attr('src', 'http://farros.gr/images/bg.jpg'); }); }); </script> </head> <body> <div id="main-content"> <div id="main-content-image" class="loading"> <a href="#"><img id="about" src='http://farros.gr/images/about.png' alt='Haris Farros'/></a> </div> </div> </body> </html>

    Read the article

  • Problems with show hid jquery

    - by Michael
    I am someone can help... This should be easy but I am lost. <!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>Show Hide Sample</title> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#content1').hide(); $('a').click(function(){ $('#content1').show('slow'); }); $('a#close').click(function(){ $('#content1').hide('slow'); }) }); </script> <style> body{font-size:12px; font-family:"Trebuchet MS"; background: #CCF} #content1{ border:1px solid #DDDDDD; padding:10px; margin-top:5px; width:300px; } </style> </head> <body> <a href="#" id="click">Test 1</a> <div class="box"> <div id="content1"> <h1 align="center">Hide 1</h1> <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> <p><a href="#" id="close">Close</a></p> </div> </div> <a href="#" id="click">Test 2</a> <div class="box"> <div id="content1"> <h1 align="center">Hide 2</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.</p> <p><a href="#" id="close">Close</a></p> </div> </div> </body> </html>

    Read the article

  • css & horizontal scrolling

    - by zen
    One of my most favorite websites is that of the Oxford Hotel in Romania. I like the simplicity of the site and how it flows. I am trying to create a similar scrolling effect using jquery and I've been somewhat successful to a point. My trouble is with css... I am not a wizard in that department. Anyway,...my questions! 1. How can I first make sure that the ".box" class will be in the center of the page when the corresponding link is clicked? Right now it positions itself on the left. 2. Then, how can I tweak this code so that the user only can see the width of the screen and not the browser scroller/the rest of my ".box" divs? Refer to the oxford link if you need to see an example of what I'd like to achieve. This is a portion of my current CSS. body { background: #f2f2f2; text-align:left; color:#666; font-size:14px; font-family:georgia, 'time new romans', serif; margin:0 auto; padding:0; } #menu { background: #333333; position: fixed; top: 0px; left: 0; border: 1px solid #000; clear: both; float: left; font-family: helvetica, sans-serif; font-size: 18px; text-transform: uppercase; margin: 0; padding: 18px; z-index: 500; filter: alpha(opacity=75); opacity: .75; } #menu ul{ list-style-type: none; margin: 0; padding: 0; } #menu ul li{ list-style-type: none; color: #777; display: inline; margin: 0; padding: 0 10px 0 10px; } #menu ul li a{ text-decoration: none; list-style-type: none; color: #777; display: inline; margin: 0; padding: 0; } #menu ul li a:hover{ text-decoration: none; list-style-type: none; color: #fff; display: inline; margin: 0; padding: 0; } #container { position: absolute; top: 120px; width: 70000px; margin: 0; padding: 0; } .box { background: white; border: 3px dashed #f2f2f2; width: 600px; float: left; font-size: 10px; line-height: 15px; margin: 0; padding: 5px 30px 30px 30px; }

    Read the article

  • Toggle KML Layers, Infowindow isnt working

    - by user1653126
    I have this code, i am trying to toggle some kml layers. The problem is that when i click the marker it isn't showing the infowindow. Maybe someone can show me my error. Thanks. Here is the CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=IzaSyAvj6XNNPO8YPFbkVR8KcTl5LK1ByRHG1E&sensor=false"> </script> <script type="text/javascript"> var map; // lets define some vars to make things easier later var kml = { a: { name: "Productores", url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4" } // keep adding more if you like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(13.324182,-87.080071), zoom: 8, mapTypeId: google.maps.MapTypeId.TERRAIN } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + kml[prop].name + "<\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\/a><\/li>" + "<\/ul><\/form>"; document.getElementById("toggle_box").innerHTML = html; }; function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal); }; </script> <style type="text/css"> .selected { font-weight: bold; } </style> </head> <body> <div id="map_canvas" style="width: 50%; height: 200px;"></div> <div id="toggle_box" style="position: absolute; top: 200px; right: 1000px; padding: 20px; background: #fff; z-index: 5; "></div> </body> </html>

    Read the article

  • How we should load the MFMailViewController in cocos2d ?

    - by srikanth rongali
    I am writing an app in using cocos2d. This method I have written for the selector goToFirstScreen: . The view is in landscape mode. I need to send an email. So, I need to launch the MFMailComposeViewController. I need it in portrait mode. But, the control is not entering in to viewDidLoad of the mailMe class. The problem is in goToScreen: method. But, I do not get where I am wrong ? -(void)goToFirstScreen:(id)sender { NSLog(@"goToFirstScreen: "); CCScene *Scene = [CCScene node]; CCLayer *Layer = [mailME node]; [Scene addChild:Layer]; [[CCDirector sharedDirector] setAnimationInterval:1.0/60]; [[CCDirector sharedDirector] pushScene: Scene]; } This is my mailMe class to launch mail controller #import <UIKit/UIKit.h> #import <MessageUI/MessageUI.h> #import <MessageUI/MFMailComposeViewController.h> #import "cocos2d.h" @interface mailME : CCLayer <MFMailComposeViewControllerDelegate> { UIViewController *mailComposer; } -(void)displayComposerSheet; -(void)launchMailAppOnDevice; @end #import "mailME.h" @implementation mailME -(void)viewDidLoad { NSLog(@"Enetrd in to mail"); Class mailClass = (NSClassFromString(@"MFMailComposeViewController")); if (mailClass != nil) { if ([mailClass canSendMail]) { [self displayComposerSheet]; } else { [self launchMailAppOnDevice]; } } else { [self launchMailAppOnDevice]; } } -(void)displayComposerSheet { CCDirector *director = [CCDirector sharedDirector]; [director pause]; [director stopAnimation]; [director.openGLView setUserInteractionEnabled:NO]; mailComposer = [[UIViewController alloc] init]; [mailComposer setView:[[CCDirector sharedDirector]openGLView]]; [mailComposer setModalTransitionStyle:UIModalTransitionStyleCoverVertical]; MFMailComposeViewController *picker = [[MFMailComposeViewController alloc] init]; picker.mailComposeDelegate = self; [picker setSubject:@"Hello!"]; NSArray *toRecipients = [NSArray arrayWithObject:@"[email protected]"]; [picker setToRecipients:toRecipients]; NSString *emailBody = @"It is not working!"; [picker setMessageBody:emailBody isHTML:YES]; [mailComposer presentModalViewController:picker animated:NO]; [picker release]; } - (void)mailComposeController:(MFMailComposeViewController*)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError*)error { switch (result) { case MFMailComposeResultCancelled: break; case MFMailComposeResultSaved: break; case MFMailComposeResultSent: break; case MFMailComposeResultFailed: break; default: break; } [mailComposer dismissModalViewControllerAnimated:NO]; [[UIApplication sharedApplication] setStatusBarOrientation:CCDeviceOrientationLandscapeLeft animated:NO]; CCDirector *director = [CCDirector sharedDirector]; [director.openGLView setUserInteractionEnabled:YES]; [director startAnimation]; [director resume]; [mailComposer.view.superview removeFromSuperview]; } -(void)launchMailAppOnDevice { NSString *recipients = @"mailto:[email protected]?&subject=Hello!"; NSString *body = @"&body=It is not working"; NSString *email = [NSString stringWithFormat:@"%@%@", recipients, body]; email = [email stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; [[UIApplication sharedApplication] openURL:[NSURL URLWithString:email]]; } - (void)dealloc { [super dealloc]; } @end

    Read the article

  • Working on a jQuery plugin : viewport simulator

    - by pixelboy
    Hi community, i'm working on a jQuery plugin that's aiming to simulate one axis camera movements. The first step to achieving this is simple : use conventional, clean markup, and get the prototype to work. Heres how to initiate the plugin : $('#wrapper').fluidGrids({exclude: '.exclude'}); Here's a working demo of the WIP thing : http://sandbox.test.everestconseil.com/protoCitroen/home.html Where am I having issues : Is there a fast way to detect if parent of each target (clickable animated element) is a href link, and if so to save this url ? My clone uses the original background image to then animate it.fade it to black/white. But when you clik on an element, image url is found, but doesn't seem to be injected. Do you see anything ? Finally, about animation of elements : as you can see in source code, I'm using the container $('#wrapper') to position all animated children. What would be the perfect properties to apply to make this cross browser proof ? Here's the source code for the plugin, fully commented. (function($){ $.fn.extend({ //plugin name - fluidGrids fluidGrids: function(options) { //List and default values for available options var defaults = { //The target that we're going to use to handle click event hitTarget: '.animateMe', exclude: '.exclude', animateSpeed: 1000 }; var options = $.extend(defaults, options); return this.each(function() { var o = options; //Assign current element to variable var obj = $(this); //We assign default width height and positions to each object in order to get them back when necessary var objPosition = obj.position(); //Get all ready to animate targets in innerViewport var items = $(o.hitTarget, obj); //Final coords of innerViewport var innerViewport = new Object(); innerViewport.top = parseInt(objPosition.top); innerViewport.left = parseInt(objPosition.left); innerViewport.bottom = obj.height(); innerViewport.right = obj.width(); items.each(function(e){ //Assign a pointer cursor to each clickable element $(this).css("cursor","pointer"); //To load distant url at last, we look for it in Title Attribute if ($(this).attr('title').length){ var targetUrl = $(this).attr('title'); } //We assign default width height and positions to each object in order to get them back when necessary var itemPosition = $(this).position(); var itemTop = itemPosition.top; var itemLeft = itemPosition.left; var itemWidth = $(this).width(); var itemHeight = $(this).height(); //Both the original and it's animated clone var original = $(this); //To give the if (original.css('background-image')){ var urlImageOriginal = original.css('background-image').replace(/^url|[("")]/g, ''); var imageToInsert = "<img src="+urlImageOriginal+"/>" } var clone = $(this).clone(); original.click(function() { $(clone).append(imageToInsert); $(clone).attr("id","clone"); $(clone).attr('top',itemTop); $(clone).attr('left',itemLeft); $(clone).css("position","absolute"); $(clone).insertAfter(this); $(this).hide(); $(clone).animate({ top: innerViewport.top, left: innerViewport.left, width: innerViewport.bottom, height: innerViewport.right }, obj.animateSpeed); $("*",obj).not("#clone, #clone * , a , "+ o.exclude).fadeOut('fast'); //Si l'objet du click est un lien return false; }); }); }); } }); })(jQuery);

    Read the article

  • Pure JSP without mixing HTML, by writing html as Java-like code

    - by ADTC
    Please read before answering. This is a fantasy programming technique I'm dreaming up. I want to know if there's anything close in real life. The following JSP page: <% html { head { title {"Pure fantasy";} } body { h1 {"A heading with double quote (\") character";} p {"a paragraph";} String s = "a paragraph in string. the date is "; p { s; new Date().toString(); } table (Border.ZERO, new Padding(27)) { tr { for (int i = 0; i < 10; i++) { td {i;} } } } } } %> could generate the following HTML page: <html> <head> <title>Pure fantasy</title> </head> <body> <h1>A heading with double quote (") character</h1> <p>a paragraph</p> <p>a paragraph in string. the date is 11 December 2012</p> <table border="0" padding="27"> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </body> </html> The thing about this fantasy is it reuses the same old Java programming language technique that enable customized keywords used in a way similar to if-else-then, while, try-catch etc to represent html tags in a non-html way that can easily be checked for syntactic correctness, and most importantly can easily be mixed up with regular Java code without being lost in a sea of <%, %>, <%=, out.write(), etc. An added feature is that strings can directly be placed as commands to print out into generated HTML, something Java doesn't support (where pure strings have to be assigned to variables before use). Is there anything in real life that comes close? If not, is it possible to define customized keywords in Java or JSP? Or do I have to create an entirely new programming language for that? What problems do you see with this kind of setup? PS: I know you can use HTML libraries to construct HTML using Java code, but the problem with such libraries is, the source code itself doesn't have a readable HTML representation like the code above does - if you get what I mean.

    Read the article

  • WPF DataTemplateKey can not find ListBox key

    - by Ryan
    I am fairly new to WPF and am having trouble getting the DataTemplateKey to find my ListBox. <Window.Resources> <ControlTemplate x:Key="FocusTemplate" > <Rectangle Fill="Azure" Width="290" Height="55" /> </ControlTemplate> <Style x:Key="FocusStyle" TargetType="{x:Type Control}"> <Setter Property="Template" Value="{StaticResource FocusTemplate}"/> </Style> <Style TargetType="ListBoxItem"> <EventSetter Event="GotFocus" Handler="ListItem_GotFocus"></EventSetter> </Style> <DataTemplate DataType="{x:Type TextBlock}"> </DataTemplate> <DataTemplate x:Key="CustomListData" DataType="{x:Type ListBox}"> <Border BorderBrush="Black" BorderThickness="1" Margin="-2,0,0,-1"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="55*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Grid.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Grid.RenderTransform> <!--<ScrollViewer x:Name="PART_ContentHost" />--> <TextBox Width="290" TextAlignment="Left" VerticalContentAlignment="Center" BorderThickness="0" BorderBrush="Transparent" Foreground="#FF6FB8FD" FontSize="18" FocusVisualStyle="{StaticResource FocusStyle}" Name="editingBox" TextWrapping="Wrap" Text="{Binding .}" Grid.Column="1" Grid.Row="1" MinHeight="55" Cursor="Hand" IsReadOnly="True" > <TextBox.Background> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <LinearGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform CenterX="0.5" CenterY="0.5"/> <SkewTransform CenterX="0.5" CenterY="0.5"/> <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/> <TranslateTransform/> </TransformGroup> </LinearGradientBrush.RelativeTransform> <GradientStop Color="#FF2D4984"/> <GradientStop Color="#FF182D56" Offset="0.042"/> </LinearGradientBrush> </TextBox.Background> </TextBox> </Grid> </Border> </DataTemplate> <Style TargetType="{x:Type ListBox}"> <Setter Property="ItemTemplate" Value="{StaticResource CustomListData }" /> <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /> </Style> </Window.Resources> <Window.DataContext> <ObjectDataProvider ObjectType="{x:Type local:ImageLoader}" MethodName="LoadImages" /> </Window.DataContext> <ListBox ItemsSource="{Binding}" Width="320" Background="#FF021422" BorderBrush="#FF1C4B79"> <ListBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}">Transparent</SolidColorBrush> </ListBox.Resources> </ListBox> The following code will find a TextBlock var key = new System.Windows.DataTemplateKey(typeof(TextBlock)); var r = (DataTemplate)this.FindResource(key); However, when I change the type to ListBox, the key can not be found. What have I missed? Thanks Ryan

    Read the article

  • WYSIHAT 'resonds_to_parent" undefined method - Ruby on Rails

    - by bgadoci
    I just successfully installed WysiHat in my rails blog. Seems that the 'add a picture' feature is not working. It successfully allows me to find and select a picture from my desktop but upon clicking save, it does nothing. I also have Paperclip successfully installed and can attach images to records outside the WYSIHAT form field. Any ideas? (let me know if I need to post any code). Also, WysiHat-engine uses facebox, not sure if that is relevant. UPDATE: Added Server Log, looks like paperclip is saving it so not sure what else is going wrong. Processing PostsController#update (for 127.0.0.1 at 2010-04-23 16:42:14) [PUT] Parameters: {"commit"=>"Update", "post"=>{"body"=>"<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>", "title"=>"Rails Code for Search"}, "authenticity_token"=>"hndm6pxaPLfgnSMFAmLDGNo86mZG3XnlfJoNOI/P+O8=", "id"=>"105"} Post Load (0.2ms) SELECT * FROM "posts" WHERE ("posts"."id" = 105) Post Update (0.3ms) UPDATE "posts" SET "updated_at" = '2010-04-23 21:42:14', "body" = '<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>' WHERE "id" = 105 [paperclip] Saving attachments. Redirected to http://localhost:3000/posts/105 Completed in 12ms (DB: 0) | 302 Found [http://localhost/posts/105] UPDATE 2 I installed ImageMagic and now I get the following error. Processing WysihatFilesController#index (for 127.0.0.1 at 2010-04-23 23:27:57) [GET] Parameters: {"editor"=>"post_body_editor"} WysihatFile Load (0.3ms) SELECT * FROM "wysihat_files" Rendering wysihat_files/index Rendered wysihat_files/_form (1.9ms) Completed in 4ms (View: 3, DB: 0) | 200 OK [http://localhost/wysihat_files/?editor=post_body_editor] Processing WysihatFilesController#create (for 127.0.0.1 at 2010-04-23 23:28:09) [POST] Parameters: {"commit"=>"Save changes", "wysihat_file"=>{"file"=>#<File:/var/folders/F3/F3ovLEb1EMW4aZ5nsRvRlU+++TI/-Tmp-/RackMultipart20100423-43326-1mzeb3s-0>}, "authenticity_token"=>"IHF9Ghz6gYuAeNOUYhna+O0A4WrDbm4iha4Tsavu97o="} NoMethodError (undefined method `responds_to_parent' for #<WysihatFilesController:0x10352a2c0>): vendor/gems/wysihat-engine-0.1.12/app/controllers/wysihat_files_controller.rb:10:in `create' Rendered rescues/_trace (25.2ms) Rendered rescues/_request_and_response (0.3ms) Rendering rescues/layout (internal_server_error) Update 3 After reading a comment below I am thinking that perhaps I am missing something in my Post model. Here is the code for the model. class Post < ActiveRecord::Base has_attached_file :photo validates_presence_of :body, :title has_many :comments, :dependent => :destroy has_many :tags, :dependent => :destroy has_many :ugtags, :dependent => :destroy has_many :votes, :dependent => :destroy belongs_to :user after_create :self_vote def self_vote # I am assuming you have a user_id field in `posts` and `votes` table. self.votes.create(:user => self.user) end cattr_reader :per_page @@per_page = 10 end

    Read the article

< Previous Page | 219 220 221 222 223 224 225 226 227 228 229 230  | Next Page >