We Keep Coding

Making a link work with no text in Sitecore

I am having a problem with how to display a link in Sitecore. Currently I have three fields that I use: Name, Title and Link. All three of these fields are within a div tag, so...
<div class="container">
<div class="name"><sc:FieldRenderer ID="ColumnName" FieldName="Name" runat="server" /></div>
<div class="title"><sc:FieldRenderer ID="ColumnTitle" FieldName="Title" runat="server" /></div>
<div class="link"><sc:FieldRenderer ID="ColumnLink" FieldName="Link" runat="server" /></div>
</div>
For regular view, the link tag is being displayed as just text (that is written in Sitecore) but when it switches to mobile view, the container becomes the link with the Name and Title as the only thing showing and taking away what is in the Link field. My problem is how do I make the container the same link as the one that displays as text in desktop view? Is there a way have the text not be displayed and put an overlay container ontop of everything but just have the background as transparency to make the container go to the same link? For the backend, I just used a Listview that contained everything to make the fields show:
protected void Page_Load(object sender, EventArgs e)
{
Item item = this.DataSourceItem;
lvContains.DataSource = ((MultilistField)item.Fields["Columns"]).GetItems();
lvContains.DataBind();
}
protected void lvContains_ItemDataBound(object sender, ListViewItemEventArgs e)
{
if (e.Item.ItemType == ListViewItemType.DataItem)
{
Item item = (Item)e.Item.DataItem;
((FieldRenderer)e.Item.FindControl("ColumnName")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnTitle")).Item = item;
((FieldRenderer)e.Item.FindControl("ColumnLink")).Item = item;
}
}

Assuming you are using a responsive design, for the mobile/tablet breakpoints you can add some additional CSS properties to make the link the full height/width of the parent container and hide the text:
.container { border: solid 1px red; position: relative; }
.name { border: solid 1px blue; }
.title { border: solid 1px green; }
.link a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-size: 0;
color: transparent;
}
<div class="container">
<div class="name">Item Name</div>
<div class="title">Item Title</div>
<div class="link">Item Link</div>
</div>
If you are not using a responsive design, and using device detection, then you can add an additional CSS class to the link and modify the css to match:
.link a.mobile {
...
}
And add the CSS Class in code behind:
((FieldRenderer)e.Item.FindControl("ColumnLink")).CssClass = "mobile";

How to change button text in file upload control?

I try to change text of file upload control browse button. I made file upload control visible=false and I added another textbox and button:
.aspx file:
<asp:FileUpload ID="fuUploadPhoto" runat="server" visible="false"/>
<asp:TextBox ID="tbFilePath" runat="server" />
<asp:Button ID="btnChooseFile" runat="server" Text="Choose file from disk" />
next I try to add Attribute to btnChooseFile in PageLoad in .cs. Unfortunately it doesn't work and I don't know why. Where I made a mistake?
.cs file:
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "document.getElementById(" + fuUploadPhoto.ClientID + ").click()");
MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
protected void btnChooseFile_Click(object sender, EventArgs e)
{
if (fuUploadPhoto.HasFile)
{
tbFilePath.Text = fuUploadPhoto.PostedFile.FileName;
string filename = Path.GetFileName(fuUploadPhoto.FileName);
string ext = Path.GetExtension(filename);
imageGuid = Guid.NewGuid();
string contenttype = String.Empty;
switch (ext)
{
case ".jpg":
contenttype = "image/jpg";
break;
case ".jpeg":
contenttype = "image/jpg";
break;
case ".png":
contenttype = "image/png";
break;
}
if (string.IsNullOrEmpty(contenttype))
{
ltrErrorMessage.Text = "Nieprawidłowy format pliku!";
}
//prawidłowy format pliku
else
{
if (fuUploadPhoto.PostedFile.ContentLength > MyConsts.DAL.SizeOfPhoto)
{
ltrErrorMessage.Text = "Plik może mieć maksymalnie "+ MyConsts.DAL.SizeOfPhoto/1024 + " Mb! Zmniejsz plik i spróbuj ponownie.";
}
//jeśli prawidłowy format i rozmiar zdjęcia
else
{
try
{
filePath = ConfigurationManager.AppSettings["FilesPath"] + "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
path = "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
//zapisujemy plik na dysk
fuUploadPhoto.SaveAs(filePath);
if (File.Exists(filePath))
{
imgInspirationPhoto.ImageUrl = filePath;
imgInspirationPhoto.Visible = true;
}
else
{
imgInspirationPhoto.Visible = false;
}
}
catch (Exception ex)
{
Logger.Error(ex.Message, LogSource, ex);
}
}
}
}
}

When you make the fileupload visible false it won't be rendered on the page i.e its not hidden but not present. hence make it display none rather than visible false.
Try this
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "jQuery('#" + fuUploadPhoto.ClientID + "').click();return false;");
//MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
in aspx file:
<div style="display:none;">
<asp:FileUpload ID="fuUploadPhoto" runat="server"/>
</div>
remember to add reference to jQuery library in the aspx page;
Update: Also the file is not available in the code behind until full postback This solution might help

using two js files http://the-echoplex.net/demos/upload-file/file-upload.js and http://the-echoplex.net/demos/upload-file/jelly/min.js .And add the file-upload.css file.Your sample
aspx file is,
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<script src="script/jelly.js" type="text/javascript"></script>
<style type="text/css">
/****************** Start page styles ********************************************/
body {
background: #DFA01B;
font-family: arial, sans-serif;
font-size: 11px;
}
#wrap {
max-width: 600px;
margin: 30px auto;
background: #fff;
border: 4px solid #FFD16F;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
.field {
padding: 0 0 1em;
}
</style>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<form enctype="multipart/form-data" action="#" method="post">
<div class="field">
<label class="file-upload">
<span><strong>Put YOUR TEXT</strong></span>
<%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>
<asp:FileUpload
ID="FileUpload1" name="uploadfile" runat="server"
ondatabinding="FileUpload1_DataBinding" />
</label>
</div>
</form>
</div><!--/ wrap -->
<script src="script/file-upload.js" type="text/javascript"></script>
</form>
</body>
</html>
and CSS file,
body {
}
/*
As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled
*/
.file-upload {
overflow: hidden;
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
/* Cosmetics */
color: #fff;
border: 2px solid #2FA2FF;
background: #6FBEFF;
/* Nice if your browser can do it */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
text-shadow: #000 1px 1px 4px;
}
.file-upload:hover {
background: #2FA2FF;
}
.file-upload.focus {
outline: 2px solid yellow;
}
.file-upload input {
position: absolute;
top: 0;
left: 0;
margin: 0;
font-size: 70px;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 1.75em arial,sans-serif;
}
.file-upload span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: .45em;
}
/* Adjust the button size */
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }
.file-upload-status {
margin-left: 10px;
vertical-align: middle;
padding: 7px 11px;
font-weight: bold;
font-size: 16px;
color: #888;
background: #f8f8f8;
border: 3px solid #ddd;
}
you can download sample project at changedfileuploadbutton text

You can't using the standard asp file upload control.
You could create your own custom control which inherits from FileUpload, there you could add custom behaviour:
public class MyFileUpload : FileUpload
{
//do stuff
}

Unable to collapse div using Javascript

I have a link,When that link clicked then show Hidden div content.But the problem is next time click i need to Collapse the div.
Here is my Hidden DIV
<div id="divHiddenContainer" style="display: none;">
<div id="divItem1"> <span">
</span></div>
Here is the Link
Read More
Here is Javascript
<script type="text/javascript">
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeIn(100000, function () {
});
});

This is how I do mine.
Javascript
<script type="text/javascript">
$(function () {
$('.dragbox')
.each(function () {
$(this).hover(function () {
$(this).find('h2').addClass('collapse');
}, function () {
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function () {
$(this).find('.configure').css('visibility', 'visible');
}, function () {
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function () {
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
</script>
HTML
<div class="dragbox" id="Widget2" runat="server">
<h2 style="font-size: 14pt">Heading Goes Here</h2>
<div class="dragbox-content">
//Information Here
</div>
</div>
So when you click on the Header (h2), it hides and when you click on it again, it is visible. You will also need some css.. here is mine.
CSS
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#e2e2e2;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url("../Images/collapse.png") no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
I use the 'dragbox' in a sortable jquery as well. So as you can tell, you will not need the .columns, but I showed them just incase you go that route and would like to use div's as columns. If you do, all you need to do is add
<div class="column" id="column1" runat="server">
</div>
And then place the 'dragbox' within that. You can have 2 of these 'columns'
Hope this helps.

You need a condition (if, else) to call fadeIn when the div is hidden, and fadeOut when the div is shown!
Because your code only call fadeIn so the first time, it will fadeIn and the next call it will also fadeIn, so it will stay there.
I don't know in JQuery but that's how I do it in javascript to know if the div is shown or hidden:
if(div.style.display == 'block') {
}
//call fadeOut
else {
//call fadeIn
}

Just use fadeToggle instead:
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeToggle(100000, function () {
});
});

You can use the toggle method for your desired div inside the click event of a hyperlink.
I've made an example for you in this fiddle > jsfiddle.net/MK68L
Hope it helps

Checking username availability

I have created an check username availability inside a createuserwizard. And i had added a progress indicator to the checking process and would show a spinner image (in gif format) and it was done by using java script.
if the system is in the midst of checking the username in database, it would display the spinner image and at the same time display a text "Checking availability..."
And the problem not is the spinner image do not appear when it was checking..
Here is code:
<script language="javascript" type="text/javascript">
// Hook the InitializeRequest event.
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
function InitializeRequest(sender, args) {
// Change div's CSS class and text content.
$get('UserAvailability').className = 'progress';
$get('UserAvailability').innerHTML = 'Checking availability...';
}
</script>
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<tr>
<td class="style4">Username:</td>
<td>
<asp:TextBox runat="server" ID="UserName" AutoPostBack="True"
ontextchanged="Username_Changed" Width="190" />
<div runat="server" id="UserAvailability" style="background-position: left; background-repeat: no-repeat; margin-left: -250px; padding-left: 22px; float:right;"></div>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Here is the code behind:
protected void Username_Changed(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
TextBox UserNameTextBox = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName");
if (Membership.GetUser(UserName.Text) != null)
{
UserAvailability.InnerText = "Username taken, sorry.";
UserAvailability.Attributes.Add("class", "taken");
}
else
{
UserAvailability.InnerText = "Username available!";
UserAvailability.Attributes.Add("class", "available");
}
}
I have used a masterpage, I had tried putting the JS file inside masterpage, but the image still not appearing.
EDIT
<style type="text/css">
#UserAvailability
{
padding-left: 22px;
margin-left: 30px;
float: left;
background-position: left;
background-repeat: no-repeat;
}
.progress
{
background-image: url(Images/spinner.gif);
}
.taken
{
background-image: url(Images/taken.gif);
}
.available
{
background-image: url(Images/available.gif);
}
</style>

SimpleModal does not size properly with initial load

I currently have a generic image loader using simplemodal.
$('#clickMe').click(function(){
$.modal("<div><img src=\"someimage.jpg\" /></div>");
});
The first time I click -- the modal window is incorrect. It is displayed as a small window behind the image.
The second time I click the button -- the modal is the correct. The size of the modal is correct based on the image rendered and image is inside the modal box.
I do not have the option of creating a div with the image and setting the display none property.
any insight ?

From what I can tell with the way you are loading the image, SimpleModal is not able to determine it's size.
You have a couple of options...
1) Add an onShow callback and call $.modal.setContainerDimensions()
$('.clickMe').click(function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>", {
onShow: function () {
$.modal.setContainerDimensions();
}
});
return false;
});
2) Load the image first, then show it:
$('.clickMe').click(function () {
var img = new Image();
img.onload = function () {
$.modal("<div><img src=\"someimage.jpg\" /></div>");
};
img.src = 'someimage.jpg';
return false;
});
Both of those should work. Let me know if you have any troubles.

this code will display image with simplemodal plugin.
I just post here and add a little description.
html:
<table class="thumbnail">
<tr>
<td>
<img src="/peopledesign/pictures/1319003385503_thumbnail.jpg" alt="">
</td>
</tr>
<tr>
<td>
zoom out
</td>
</tr>
</table>
<div id='pix'>
<div class='header'><span>#springMessage('display.common.showpix')</span></div>
<div class='pixframe'></div>
</div>
<script type="text/javascript">
$(document).ready(
function(){
previewPix($('#project_item_scope a.pixLink,#project_basicinfo_scope a.pixLink'));
}
);
</script>
javascript which will get link's href property and create a image appending to pixframe div:
function previewPix(linkObj){
linkObj.click(
function (e) {
e.preventDefault();
var imgUrl=$(this).attr('href');
var dialogDivObj=$('#pix');
var pixDivObj=$('.pixframe',dialogDivObj);
pixDivObj.empty(); //clean pix div
var img = new Image();
img.onload = function () {// first load image and fit its width and height
var i=$(img);
i.attr('id', 'pic-image');
i.width(this.width);
i.height(this.height);
var outerHeight = i.outerHeight(true);
var outerWidth = i.outerWidth(true);
dialogDivObj.width(outerWidth);
dialogDivObj.height(outerHeight+30);//30=container header's height
pixDivObj.append(i);
showPixDialog(
dialogDivObj
);
}
img.src=imgUrl;
}
);
}
function showPixDialog(dialogDivObj){
dialogDivObj.modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["10%"],
overlayId: 'pix-overlay',
containerId: 'pix-container',
onShow:function(dialog){
// important!
// refere from:http://stackoverflow.com/questions/5240875/simplemodal-does-not-size-properly-with-initial-load
dialog.modal.setContainerDimensions();
}
});
css which modified from SimpleModal's dialog style:
/* pix preview dialog */
#pix {display:none;}
/* Overlay */
#pix-overlay {background-color:#eee; cursor:default;}
/* Container */
#pix-container {
height:auto;
width:auto;
font:12px/1.5 "Helvetica Neue",Arial,"Liberation Sans",FreeSans,sans-serif;
text-align:left;
background:#fff;
border:1px solid #F90;
}
#pix-container .header {
height:30px; line-height:30px; width:100%;
/*background:url(../../images/simplemodal-header.gif) repeat-x; color:#fff;*/
background-color:#F90;
font-weight:bold;
}
#pix-container.header span {padding-left:8px;}
#pix-container.pixframe {
text-align:center;
vertical-align: middle;
margin:0;
padding:5px 5px 5px 5px;
}
#pix-container a.modal-close,
#pix-container a.modal-close:link,
#pix-container a.modal-close:active,
#pix-container a.modal-close:visited {
text-decoration:none;
font-weight:bold;
position:absolute;
right:10px;
top:2px;
color:#fff;
}
#pix-container a.modal-close:hover {color:#ccc;}

If you are using this: SimpleModal , then try to set autoResize to 'true' in plugin options, like so:
$("#sample").modal({
autoResize:true
});
Also try putting your code into a .ready() or window.onload
Good luck, also maybe try other modal plugins, such as FancyBox