Solved

Change the JQuery Fancybox width

Posted on 2011-09-13
1
782 Views
Last Modified: 2012-06-27
had a popup fancybox but couldnt adjust the width of the fancybox.
mainpage 
-------------- 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server"> 
<link rel="Stylesheet" href="../../Styles/JQuery/jquery.fancybox-1.3.4.css"/> 
<script type="text/javascript" src="../../Styles/JQuery/jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="../../Styles/JQuery/jquery.fancybox-1.3.4.pack.js"></script> 
    <script> 
 
        function ShowContent(_url)  
        { 
            $.fancybox( 
                                _url, 
                                { 
                                    type: 'iframe', 
                                    showCloseButton: true, 
                                    opacity: true, 
                                    overlayColor: '#000', 
                    overlayOpacity: 0, 
                                    transitionIn: 'none', 
                                    transitionOut: 'none', 
                                    enableEscapeButton: true 
                   
                                } 
                        ); 
        } 
    </script> 
 
 
 
    <style type="text/css"> 
        .style5 
        { 
            font-family : Arial; 
            font-size : 12; 
            height: 19px; 
        } 
        .style6 
        { 
            height: 19px; 
        } 
    </style> 
 
 
 
</asp:Content> 
 
 
popup page 
----------------- 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
       <style> 
        * 
        { 
            font-family:Tahoma, Arial; 
            font-size:11px; 
             
        } 
        h1{font-size:15px; font-weight:bold;} 
        p{color:#333;} 
    </style> 
    <link type="text/css" rel="Stylesheet" href="../../Styles/JQuery/jquery.fancybox-1.3.4.css" /> 
 
</head> 
<body> 
    <form id="form1" runat="server"> 
   <div> 
      <asp:GridView AutoGenerateColumns="false" ID="gvPopup" runat="server" Width="100%" onrowdatabound="gvPopup_RowDataBound"> 
        <Columns> 
            <asp:BoundField DataField="actualtime" HeaderText="Actual Time" HeaderStyle-BackColor="LightGray" /> 
            <asp:BoundField DataField="lessonno" HeaderText="Lesson No" ItemStyle-Width="100px" HeaderStyle-BackColor="LightGray" /> 
            <asp:BoundField DataField="modulename" HeaderText="Module Name" ItemStyle-Width="100px" HeaderStyle-BackColor="LightGray" /> 
            <asp:BoundField DataField="classtype" HeaderText="Class Type" ItemStyle-Width="100px" HeaderStyle-BackColor="LightGray" /> 
            <asp:BoundField DataField="attendancestatus" HeaderText="Attendance Status" ItemStyle-Width="100px" HeaderStyle-BackColor="LightGray" /> 
            <asp:BoundField DataField="lateduration" HeaderText="Late Duration" DataFormatString="{0:t}" ItemStyle-Width="100px" HeaderStyle-BackColor="LightGray" /> 
        </Columns> 
      </asp:GridView> 
    </div> 
    </form> 
</body> 
</html>

Open in new window

0
Comment
Question by:doramail05
1 Comment
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36533702
check the api : http://fancybox.net/api

we set the width :
<script> 
 
        function ShowContent(_url)  
        { 
            $.fancybox( 
                                _url, 
                                { 
width:1024,
                                    type: 'iframe', 
                                    showCloseButton: true, 
                                    opacity: true, 
                                    overlayColor: '#000', 
                    overlayOpacity: 0, 
                                    transitionIn: 'none', 
                                    transitionOut: 'none', 
                                    enableEscapeButton: true 
                   
                                } 
                        ); 
        } 
    </script>

Open in new window

0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question