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";

"Dynamic" div between 2 "Static" divs [CSS][ASP.NET]

I have some problems with css that I need help with.
I have the following code:
<div class="UpperClass"></div>
<div class="LowerClass"></div>
Wit the following simple CSS:
.UpperClass{
background-color: red;
width: 50px;
height: 50px;
}
.MiddleClass{
background-color: green;
width: 50px;
height: 50px;
}
.LowerClass{
background-color: blue;
width: 50px;
height: 50px;
}
Now, in code behind I am dynamically adding the middle class div:
int count = 1; //Could be anything
foreach (var item in count)
{
Label placeholder = new Label();
StringBuilder sbExample = new StringBuilder();
sbExample.append("<div class='MiddleClass'></div>");
HtmlString text = new HtmlString(sbExample.ToString());
placeholder.Text = text.ToString();
this.Controls.Add(placeholder);
}
Now, all 3 divs are showing on the page, but the div with the middleclass is behind the upperclass, what I want is the upperclass to come first, then all middleclass divs and below that the lowerclass div, all nicely sorted below each other. How do I do that?
Thanks in advance.
EDIT:
Also, if I want a wrapper around it, how can I place it like this:
<div class="wrapper">
<div class="UpperClass">
</div>
//Middle class here
<div class="LowerClass">
</div>
</div>

On the front end have this:
<div class="UpperClass"></div>
<%= PopulateMiddleClass() %>
<div class="LowerClass"></div>
and on the backend
String PopulateMiddleClass()
{
String ret = "";
//loop through and populate string
return ret;
}
Or
<div class="UpperClass"></div>
<asp:PlaceHolder ID="MyPlaceHolder" runat="server"></asp:PlaceHolder>
<div class="LowerClass"></div>
Then on the backend
Page_Load(object sender, EventArgs e)
{
Literal literal = new Literal();
literal.Text = "<div class='MiddleClass'></div>";
MyPlaceHolder.Controls.Add(literal); // you could loop through and keep adding controls or you could compile them all into the one literal.
}
Hopefully this gets you on your way.

You can create one div with attribute runat="server" and use it as shown below :
Design Page:
<div class="wrapper">
<div class="UpperClass">
</div>
<div runat="server" id="divMiddle">
</div>
<div class="LowerClass"></div>
</div>
Code Behind :
int count = 1; //Could be anything
for (int i = 0; i < count; i++ )
{
Label placeholder = new Label();
StringBuilder sbExample = new StringBuilder();
sbExample.Append("<div class='MiddleClass'></div>");
HtmlString text = new HtmlString(sbExample.ToString());
placeholder.Text = text.ToString();
this.divMiddle.Controls.Add(placeholder);
}

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

Upload image file, load it for cropping in jquery modal dialog and save cropped image, ASP.NET MVC, C#, JQuery

I am developing an application where user can upload his avatar/profile photo. I want to allow the user to crop the image by uploading the image on jquery dialog. After cropping the user can save the cropped image. I am using ASP.NET MVC4, C# and Jquery. I am using JCrop jquery plugin for cropping an image.
The problem is, I am uploading the image in memory using HTML5 canvas in a base64 format and displaying the same for cropping in jquery ui dialog. I am able to crop an image but how can I save the cropped image?
Any help on this is highly appreciable.
Javascript Code
<script type="text/javascript">
//Make global variables for selected image for further usage
var selectImgWidth, selectImgHeight, jcrop_api, boundx, boundy, isError = false;
var x = 0, y = 0, w = 0, h = 0;
function showPreview(coords) {
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
}
);
x = Math.round(rx * coords.x);
y = Math.round(ry * coords.y);
w = Math.round(rx * 500);
h = Math.round(ry * 370);
}
function readfile(input) {
if (input.files && input.files[0]) {
var reader = new window.FileReader();
reader.onload = function (e) {
//$('#image_preview').attr('src', e.target.result);
//$('.oImageUploaderAdd').addClass('oHidden');
//$('.oImageUploaderEdit').removeClass('oHidden');
$('#jcrop_target').attr('src', e.target.result);
$('#preview').attr('src', e.target.result);
// destroy Jcrop if it is already existed
if (typeof jcrop_api != 'undefined')
jcrop_api.destroy();
$('#jcrop_target').Jcrop({
minSize: [0, 0],// min crop size
maxSize: [350, 350],
// aspectRatio : 1, // keep aspect ratio 1:1
//aspectRatio: 1,
bgFade: true, // use fade effect
bgOpacity: .3, // fade opacity
onChange: showPreview,
onSelect: showPreview,
allowSelect: true,
allowMove: true,
allowResize: true,
setSelect: [
$('#jcrop_target').width() / 4,
$('#jcrop_target').height() / 4,
($('#jcrop_target').width() / 4) * 3,
($('#jcrop_target').height() / 4) * 3
]
}, function () {
// use the Jcrop API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the Jcrop API in the jcrop_api variable
jcrop_api = this;
});
};
reader.readAsDataURL(input.files[0]);
$("#dialog").dialog({
width: 660,
height: 'auto',
resizable: false,
modal: true,
closeOnEscape: true,
position: { my: "middle", at: "middle", of: window }
, buttons: {
"Save Image": function () {
$.ajax({
type: "POST",
data: 'image=' + $("#jcrop_target").attr('src'),
url: "#Url.Action("UploadImage","Agent")",
success: function (respuesta) {
$('#jc-hidden-dialog').dialog('close');
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
}
}
</script>
HTML Markup
<div id="dialog" title="Add Portrait" style="display: none;">
<header class="oFormHeader isHidden">
<div class="oMsg oMsgError"></div>
</header>
<div class="cols" style="height: 413px;">
<div class="col col3of4 oColSplit">
<div class="oLoading isHidden"><span class="oNullBig">Loaded 100%...</span></div>
<div class="jsFullImageBlock">
<div class="oImageUploaderFull" style="">
<div style="width: 450px; height: 338px; position: relative; display: block;" class="jcrop-holder">
<img style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 450px; height: 338px;" src id="jcrop_target">
</div>
<div class="oDropHere isHidden" style="display: block;">
<div><span class="oTxtMega">Drop Here</span></div>
</div>
</div>
<div style="font-size: 13px; font-weight: normal">Drag frame to adjust portrait.</div>
#*<form enctype="multipart/form-data" method="post" action="Abc">*#
<div class="oInputFileWrapper">
<input type="file" name="portrait" id="portrait" accept="image/png,image/gif,image/jpeg">
</div>
#*<a class="jsChooseFile" href="#">Upload a different photo ›</a>*#
<a style="color: #0093f0; font-size: 13px; font-weight: normal" href="#">Upload a different photo ›</a>
#*</form>*#
</div>
</div>
<div class="col col1of4 txtCenter">
<h2 class="oH2High">Your profile portrait</h2>
<div class="oPortraitLarge oImagePreview" style="">
<div class="oImagePreviewArea" style="width: 100px; height: 100px; margin-left: 0px; margin-top: 0px;">
<img src style="width: 134px; height: 101px; margin-left: -16px; margin-top: -1px;" id="preview">
</div>
</div>
<section>
<div>
<button class="oBtn oBtnPrimary jsUseImage">Save Image</button>
</div>
<a class="oBtn oBtnCancel" href="#">Cancel</a>
</section>
<div class="oSupportInfo">Must be an actual picture of you! Logos, clip-art, group pictures, and digitally-altered images not allowed.</div>
</div>
</div>
</div>

try this one jcrop image crop in mvc asp.net
public Image SaveImage(string image)
{
//get a temp image from bytes, instead of loading from disk
//data:image/gif;base64,
//this image is a single pixel (black)
byte[] bytes = Convert.FromBase64String(image);
Image image;
using (MemoryStream ms = new MemoryStream(bytes))
{
image = Image.FromStream(ms);
}
image.Save("fullOutputPath", System.Drawing.Imaging.ImageFormat.Png);
return image;
}

Css display 3 foreach results per row

I have this asp.net code:
#foreach( var database in Model)
{
if (!(firstTime == database.DB))
{
<h3> #database.DB </h3>
}
<div class="logContainer" onclick="location.href='/logs/Details?databaseID=#database.DB&exceptionName=#database.Exception&exceptionsOccurred=#database.Count';">
<div class="counter"><b>#database.Count</b></div>
<div class="exceptionName"> Exceptions of Type: #database.Exception</div>
<div class="date">Siste: #database.LastOccurred</div>
<hr /> </div>
firstTime = database.DB;
}
And this CSS:
.logContainer
{
width:500px;
}
.logContainer:hover
{
cursor:pointer;
background-color:#ffffcc;
}
.counter {
height: 30px;
width:35px;
float:left;
background: none repeat scroll 0 0 #E6FFDC;
border: 1px solid #BBDD66;
text-align:center;
vertical-align:middle;
line-height:1.5em;
font-size:1.5em;
}
.exceptionName
{
width:200px;
display:inline;
padding-left: 10px;
display: inline;
}
.date
{
font-size: 0.9em;
color:gray;
width:200px;
padding-left: 47px;
}
What it does is to display the ouput row per row, and when the Dabase.DB changes it writes it and start again.
What I want is to display the output horizontally having 3 logcontainer per row, and if I encounter a new database.DB break it, write the name of the database and start from the left.
How should I do modify the code to do it?

Just make your .logcontainer float to the left, and every 3 display, clear the floating.
currentCol = 0
#foreach( var database in Model)
{
if (!(firstTime == database.DB))
{
<h3> #database.DB </h3>
currentCol = 0
}
<div class="logContainer" onclick="location.href='/logs/Details?databaseID=#database.DB&exceptionName=#database.Exception&exceptionsOccurred=#database.Count';">
<div class="counter"><b>#database.Count</b></div>
<div class="exceptionName"> Exceptions of Type: #database.Exception</div>
<div class="date">Siste: #database.LastOccurred</div>
</div>
currentCol += 1;
if (currentCol = 2) { //3 columns were displayed, switch row
currentCol = 0;
<br style="clear:both" />
}
firstTime = database.DB;
}
CSS :
.logContainer
{
width:500px;
float:left;
}
note: if the parent container of .logContainer is less than 1500px wide, you'll end up with a row of 2 columns followed by a row of 1 column.