We Keep Coding

Scrolling Dynamic DIV

I have a DIV which has images and hyperlinks, which are added in C# by CODE
mStr.Append(" <div id='wn'>");
mStr.Append("<div id='lyr1'> <ul id='horiz'>");
if (dv.Count > 0) {
for (int i = 0; i < dv.Count; i++) {
mStr.Append("<li width='450' height='110' style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>");
mStr.Append("<a href='PlayGame.aspx?GameID=" + GameLib.Utilities.Encrypt(dv[i][1].ToString()) + "'>");
mStr.Append("<img src='../" + dv[i][10].ToString() + "' width='156px' height='109px' style='padding-left:0px;' />");
mStr.Append("</a>");
mStr.Append("</li>");
}
mStr.Append("</ul></div></div>");
RelatedGames.InnerHtml.Remove(0, RelatedGames.InnerHtml.Length);
RelatedGames.InnerHtml = mStr.ToString();
}
..but the problem is that I want to scroll the DIV so that i can go through all images. I tried many ways in JQuery but it has been stuck and static. I will be grateful for any suggestions.
Or, is there any other way that the same functionality can be achieved?

Simply add the following CSS:
#lyr1 {
overflow: auto;
}
Overflow is a CSS property that specifies how content that is larger than its parents should be displayed. The default value is visible, which means that everything will be displayed, even if it goes beyond the size of its parent (which it does, in your case). Setting it to auto will make everything that doesn't fit in the parent hidden, and will add scrollbars whenever necessary. To make scrollbars always visible, do overflow: scroll;.
Live demo: http://jsfiddle.net/DanVicBez/kNk4y/

Just use a css property overflow:scroll to the target div
<div id='lyr1' style='overflow:scroll'>

Always Scroll to bottom in vertical scroll bar

I have a flowlayoutpanel in my winform in which the images are added dynamically. I want the vertical scroll bar to always be at the bottom showing the last image added. How can i do that?
I have
AutoScroll = true
FLow Direction = Top Down
Wrap Content = False

Scrollable container controls, like FlowLayoutPanel, automatically keep the control with the focus in view. But PictureBox is special, it cannot receive the focus. So you have to help by explicitly asking the FLP to make the added control visible, use its ScrollControlIntoView() method. Like this:
var pic = new PictureBox();
//...
flowLayoutPanel1.Controls.Add(pic);
flowLayoutPanel1.ScrollControlIntoView(pic);
With the strong advantage that this works for any layout setting you applied to the FLP. You can also tinker with the AutoScrollPosition property, but it is harder to get that right:
flowLayoutPanel1.AutoScrollPosition = new Point(
pic.Right - flowLayoutPanel1.AutoScrollPosition.X,
pic.Bottom - flowLayoutPanel1.AutoScrollPosition.Y);

Try this:
scrollBar.Value=scrollBar.Maximum;
here scrollBar is your ScrollBar control in winform.
For more detail, check this.

Here is a way to force the last control into view.
flowLayoutPanel.ScrollControlIntoView(Control_To_Add); // Control_To_Add is the control we want to scroll to
Button TempButton = new Button();
TempButton.Width = _Panel.ClientRectangle.Width - 6; // Make the last control in the _Panel
flowLayoutPanel.Controls.Add(TempButton); // We add this TempButton so we can scroll to the bottom of the _Panel.Controls
flowLayoutPanel.ScrollControlIntoView(b); // We scroll to TempButton at the bottom of the _Panel.Controls
flowLayoutPanel.Controls.Remove(b); // We remove TempButton
b.Dispose(); // clean up

Forcing A FlowLayoutPanel to scroll to and display all of a control.
Code Correction:
flowLayoutPanel.ScrollControlIntoView(Control_To_Add); // Control_To_Add is the control we want to scroll to
Button TempButton = new Button();
TempButton.Width = _Panel.ClientRectangle.Width - 6; // Make the last control in the _Panel
flowLayoutPanel.Controls.Add(TempButton); // We add this TempButton so we can scroll to the bottom of the _Panel.Controls
flowLayoutPanel.ScrollControlIntoView(TempButton); // We scroll to TempButton at the bottom of the _Panel.Controls
flowLayoutPanel.Controls.Remove(TempButton); // We remove TempButton
b.Dispose(); // clean up

This is the correct way:
MyControl uct = new MyControl();
uct.Parent = flowLayoutPanel;
this.ActiveControl = uct;
if (flowLayoutPanel.VerticalScroll.Visible)
{
flowLayoutPanel.ScrollControlIntoView(uct);
}

TableLayoutPanel displays vertical scroll

I have TableLayoutPanel for dynamic creation of controls with AutoScroll = true. It's work fine when I add new controls. But when I remove and all controls are visible, vertical scroll is visible.
Some screenshots here:
Expected/correct scroll visibility:
Incorrect visibility:
Any ideas?
Update:
Here is some code
tableLayoutPanel1.SuspendLayout();
tableLayoutPanel1.RowCount = 0;
tableLayoutPanel1.RowStyles.Clear();
tableLayoutPanel1.AutoScroll = true;
tableLayoutPanel1.Padding = new Padding(0, 0, SystemInformation.VerticalScrollBarWidth, 0);
foreach (var item in objects)
{
tableLayoutPanel1.RowCount++;
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.AutoSize));
tableLayoutPanel1.Controls.Add(CreateNewItem(item));
}
tableLayoutPanel1.RowCount++;
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.AutoSize));
tableLayoutPanel1.Controls.Add(CreateAddButton());
tableLayoutPanel1.ResumeLayout();
and code for deleting
tableLayoutPanel1.SuspendLayout();
tableLayoutPanel1.Controls.Remove(item);
tableLayoutPanel1.RowStyles.RemoveAt(0);
tableLayoutPanel1.RowCount--;
tableLayoutPanel1.ResumeLayout();
AutoSize is true, AutoSizeMode is GrowAndShrink

The problem concerns TableLayoutPanel scrolling.
You have to use a Panel for scrolling instead of TableLayoutPanel.
Here is an example to solve this problem (for vertical scrolling) :
Set your TableLayoutPanel properties as follow :
Dock = DockStyle.Top
AutoSize = true
AutoSizeMode = AutoSizeMode.GrowAndShrink
AutoScroll = false.
Put your TableLayoutPanel into a Panel with properties :
Dock = DockStyle.Fill
AutoScroll = true
AutoSize = false.

when you remove the dynamic controls, you need to remove the extra rows that was inserted during the addition and re-size the table layout panel height to smaller than scroll container height.
During the addition the table layout panel height would have increased, which handled by the scroll container; but when you remove the controls, the table layout panel height doesn't reduce it's height to fit the scroll container.
One way to do this is to give fixed height to the rows and set the table layout panel seize set to "Auto".

One of the easiest and funniest solution is to just disable and enable tableLayoutPanel1.AutoScroll
In your Deleting procedure code add at the end these codes :
tableLayoutPanel1.AutoScroll = False
tableLayoutPanel1.AutoScroll = True

I inserted tableLayoutPanel to XtraScrollableControl(Devexpress control). tableLayoutPanel.Dock set to Top and XtraScrollableControl.Dock to Fill. This solution did not solves this problem, but I got behavior that I need.

I counted the number of rows in my TableLayoutPanel to see how many would fit. Below the amount that fit I set AutoScroll = false for the add and delete methods. The scroll will appear for large sets and disappear on small sets.
if (tableLayoutPanel.RowCount < 15)
{
panel1.AutoScroll = false;
}
else
{
panel1.AutoScroll = true;
}

I had a TableLayoutPanel on a UserControl, docked in Fill mode, with all rows on the TableLayoutPanel set to AutoSize. This UserControl would then dynamically get put on a panel, again in Fill mode, to show it to the user when needed. I put the UserControl on AutoScroll, but that alone did not solve it.
In the end, I solved it by going over all controls in the TableLayoutPanel, storing the extremities, and baking that into a Size to put in my UserControl's AutoScrollMinSize:
private void AdjustPanelSize(ScrollableControl panel, TableLayoutPanel tableLayoutPanel)
{
int maxX = 0;
int maxY = 0;
foreach (Control c in tableLayoutPanel.Controls)
{
maxX = Math.Max(maxX, c.Location.X + c.Width);
maxY = Math.Max(maxY, c.Location.Y + c.Height);
}
panel.AutoScrollMinSize = new Size(maxX, maxY);
}
This worked, and it also has the advantage that it can be called if there would ever be controls dynamically added or removed from the TableLayoutPanel.

How do you style WebView control in Windows Store App?

I have C# / XAML win store app which receives various data from json. one piece of it - html string.
I display that string using WebView.NavigateToString
However I don't see how can I style it. Normally I would use blend to get default style and then edit it. But Blend doesn't let me style WebView.
I ended up wrapping the json html into
<body style='background-color:black;color:white' />
but this approach doesn't let me use theming which the rest of the application does.
What is the 'proper' way to style and / or format content of the WebView?

Another solution is making a WebViewContentHelper (or so) class. You may pass the theme and style the CSS according to that. For example:
string content = WebViewContentHelper.WrapHtml(originalHtmlString, backGroundColor, webView.ActualHeight);
webView.NavigateToString(content);
You can adapt this class that already copies the Font styling from Windows 8 and gives you horizontal scrolling, also arranges content in columns, just as ItemDetails Template:
class WebContentHelper
{
public static string HtmlHeader(double viewportWidth, double height) //adapt parametres
{
var head = new StringBuilder();
head.Append("<head>");
head.Append("<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=0\"/>");
head.Append("<script type=\"text/javascript\">"+
"document.documentElement.style.msScrollTranslation = 'vertical-to-horizontal';"+
"</script>"); //horizontal scrolling
//head.Append("<meta name=\"viewport\" content=\"width=720px\">");
head.Append("<style>");
head.Append("html { -ms-text-size-adjust:150%;}");
head.Append(string.Format("h2{{font-size: 48px}} "+
"body {{background:white;color:black;font-family:'Segoe UI';font-size:18px;margin:0;padding:0;display: block;"+
"height: 100%;"+
"overflow-x: scroll;"+
"position: relative;"+
"width: 100%;"+
"z-index: 0;}}"+
"article{{column-fill: auto;column-gap: 80px;column-width: 500px; column-height:100%; height:630px;"+
"}}"+
"img,p.object,iframe {{ max-width:100%; height:auto }}"));
head.Append(string.Format("a {{color:blue}}"));
head.Append("</style>");
// head.Append(NotifyScript);
head.Append("</head>");
return head.ToString();
}
public static string WrapHtml(string htmlSubString, double viewportWidth, double height)
{
var html = new StringBuilder();
html.Append("<html>");
html.Append(HtmlHeader(viewportWidth,height));
html.Append("<body><article class=\"content\">");
html.Append(htmlSubString);
html.Append("</article></body>");
html.Append("</html>");
return html.ToString();
}
}

You cannot style/extend webview apparently, Webview is not a derivative of control subclass (it does not have a control template) and is rather hosted in its own HWND. You are probably better off using webviewbrush. See this sample

You can style like this
public static string Scape(string htmlContent, string fontColor)
{
var htm = "<html> <head> <script type=\"text/javascript\"></script> <style> body { color: "+ fontColor +"; } </style> </head> <body>" + htmlContent +"</body></html>";
return htm;
}

how to shift windows forms controls?

How can i get same functionality in windows forms as in the next example. When i have two links one beneath, and when i click first link a panel is visibleunder it and next link is shifted. When i click again the panel is invisible and second link shifted back.
<script type="text/javascript">
function toggleDivState(divName)
{
var ctl = window.document.getElementById(divName);
if (ctl.style.display == "none")
ctl.style.display = "";
else
ctl.style.display = "none";
}
</script>
<a href="javascript:toggleDivState('poll<%# Eval("ID") %>');">
<div style="display: none;" id="poll<%# Eval("ID") %>">

Something like this?
on click:
control1.Visible = !control1.Visible;
control2.Visible = !control1.Visible;
??

You can use panels that have the 'Dock' property said to 'Top' - you can then adjust the height of said panel to suit.

Sound like you need a FlowLayoutPanel with FlowDirection = TopDown.
Put within this Panel your Link, Panel, Link2 and Panel2. Within the LinkClick event you set the Panel.Visible = !Panel.Visible.