0

I want to make the web part for image sliding for Picture Library.

I got this link for doing so.

My code for visual web part is :

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Slide Show</title>
    <style type="text/css">
        .size {
            height: 300px;
            width: 500px;
            position: relative;
        }

        .lab {
            background-color: rgba(0, 0, 0, 0.5);
            color: #FF0000;
            height: 80px;
            line-height: 20px;
            margin-top: 200px;
            padding: 10px;
            position: absolute;
            width: 480px;
            z-index: 100;
        }
    </style>
</head>

<body>

    <div id="main" runat="server">

        <div id="slideShowImages" runat="server">

        </div>
    </div>

    <script src="../_layouts/15/JSLink/slideShow.js"></script>
</body>

</html>

And background C# code is:

    protected void Page_Load(object sender, EventArgs e)
    {
        string HtmlCode = "";

        SPSite site = SPContext.Current.Site;

        SPWeb web = site.RootWeb;

        SPList list = web.Lists.TryGetList("Pics");

        foreach (SPListItem item in list.Items)
        {
            HtmlCode += "<img src=" + Convert.ToString(item[SPBuiltInFieldId.EncodedAbsUrl]) + " alt='Image' class='size'/>";                
        }

        main.InnerHtml = "<Label>Hello</Label>";
        slideShowImages.InnerHtml = HtmlCode;
    }

The images are stored in picture library and the lable text will be fixed which is going to be float over the image.

I tried the code shown in msdn example working perfectly but when I apply this in Visual Web Part I am not able to do it as the ID of DIVs are changed when they are runat server.

What should I do to get the html output in my web part?

Improve this question
3
  • Remove .. from <script src="../_layouts/15/JSLink/slideShow.js"></script>
    – user2536
    Nov 12, 2013 at 8:01
  • The js is loaded successfully but the problem resides in the DIV id conflicts, i.e. in js the DIV id which has value slideShowImages are slide but when I apply the runat property the child DIV is not created (Here, <div id="slideShowImages" runat="server"> in my case)
    – users1100
    Nov 12, 2013 at 8:09
  • And also the ID of main DIV is also changed to ctl00_ctl33_g_ee3e11ee_5274_4fcc_9b8d_c8eb66e2e682_main
    – users1100
    Nov 12, 2013 at 8:12

1 Answer 1

Reset to default
2

When you add runat="server" to a div tag it gets an auto generated id.

So when you in javascript or jQuery wants to get an element by ID and that element has the runat="server" attribute, then you need to use inline code to get it.

Example without runat="server" attribute

[HTML]
<div id="MyDIV">some content </div>

[jQuery]
var mydiv = $("#MyDIV");

Example with runat="server" attribute

[HTML]
<div id="MyDIV" runat="server">some content </div>

[jQuery]
var mydiv = $("#<%= MyDIV.CliendID%>");
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.