www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] ie6 overlay

  1. #1
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143

    resolved [RESOLVED] ie6 overlay

    Hey guys, I'm trying to add an overlay (similar to how lightbox works) over the entire screen. The problem is that in IE6, it only seems to work if the DIV overlay is added at the top of the page before any other content is displayed.

    Working Example:

    Code:
    <body>
    <div class="overlay"></div>
    <div id="wrap">
    <div id="header">
    <h1>Header</h1>
    </div>
    </div>
    </body>
    NOT Working Example:

    Code:
    <body>
    <div id="wrap">
    <div id="header">
    <h1>Header</h1>
    </div>
    <div id="overlay"></div>
    </div>
    </body>
    In the second example, IE6 (only IE6!) displays about a 15px bar across the top of the page (representing the overlay).

    Is there a way to have this automatically position over everything and work?

    Here's the CSS for the overlay:

    Code:
    .overlay{
    	display: block;
    	position: absolute;
    	top: 0%;
    	left: 0%;
    	width: 100%;
    	height: 100%;
    	background-color: #000;
    	z-index:1001;
    	-moz-opacity: 0.8;
    	opacity:.80;
    	filter: alpha(opacity=80);
    }
    Any ideas?

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Solved my own problem on this one! I decided to take a look at how lightbox does it and realized it's pretty simple. Just append the body like so:

    Code:
    $('body').append('<div class="overlay"></div>');

  3. #3
    Join Date
    May 2011
    Posts
    3
    hi will you please guide me how to append in javascript .below is my code.
    <script type="text/javascript">
    function displayimagepopup(ImageURL, FileID, ContentTitle, ContentDescription, DownloadURL) {
    document.getElementById('<%# hdnFileID.ClientID %>').value = FileID;
    document.getElementById('<%# hdnURL.ClientID %>').value = DownloadURL;
    document.getElementById("imageDisplay").src = "";
    document.getElementById("imageDisplay").src = ImageURL;
    document.getElementById("pBriefInfo").innerHTML = "<strong>" + ContentTitle + "</strong><br/>";
    document.getElementById("pimageDisplay").style.display = "inline";
    document.getElementById("pvideoDisplay").style.display = "none";
    if (DownloadURL == null || DownloadURL == "") {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "none";
    }
    else {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "inline";
    document.getElementById("downloadType").value = "Image";
    }
    var detailsPage = document.getElementById('<%# hdnAssetDetailsPage.ClientID %>').value;
    loadWidgets(detailsPage + "?Type=Image&KeyID=" + FileID, ContentTitle, ContentDescription, FileID, "Image");
    ViewTracker(FileID, "Image");
    loadPopup();
    }

    function displayvideopopup(VideoURL, FileID, ContentTitle, ContentDescription, DownloadURL) {
    debugger;
    document.getElementById('<%# hdnFileID.ClientID %>').value = FileID;
    document.getElementById('<%# hdnURL.ClientID %>').value = DownloadURL;

    var embedTag = document.getElementById("embedURL");
    var oParent = embedTag.parentNode;
    oParent.removeChild(embedTag);

    var oEmbed = oParent.appendChild(document.createElement('embed'));
    oEmbed.src = VideoURL; /*Or next avi file in the list*/;
    oEmbed.autoplay = "false";
    oEmbed.id = "embedURL";
    oEmbed.allowscriptaccess = "always";
    oEmbed.allowfullscreen = "true";
    oEmbed.width = "320";
    oEmbed.height = "240";

    document.getElementById("pBriefInfo").innerHTML = "<strong>" + ContentTitle + "</strong><br/>";
    document.getElementById("pimageDisplay").style.display = "none";
    document.getElementById("pvideoDisplay").style.display = "inline";
    if (DownloadURL == null || DownloadURL == "") {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "none";
    }
    else {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "inline";
    document.getElementById("downloadType").value = "Video";
    }
    var detailsPage = document.getElementById('<%# hdnAssetDetailsPage.ClientID %>').value;
    loadWidgets(detailsPage + "?Type=Video&KeyID=" + FileID, ContentTitle, ContentDescription, FileID, "Video");
    ViewTracker(FileID, "Video");
    loadPopup();
    }

    function loadWidgets(url, title, description, FileID, AssetType) {
    var widgetHTML = [];
    var element = document.getElementById("ulWidgets");
    widgetHTML.push('<li><a target="_blank" href="http://www.facebook.com/share.php?u=' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on facebook"><img src="/Assets/images/fb.gif" alt="facebook icon" /> Facebook</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://twitter.com/home?status=Currently reading ' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on Twitter"><img src="/Assets/images/tweet.gif" alt="twitter icon" /> Twitter</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://delicious.com/save?v=5&noui&jump=close&url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on delicious")"><img src="/Assets/images/del.gif" alt="delicious icon" /> Delicious</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://digg.com/submit?phase=2&url=' + encodeURIComponent(url) + '/" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on digg"><img src="/Assets/images/tu.gif" alt="digg icon" /> Digg</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&t=' + encodeURIComponent(title) + '&c=<p><img src=' + encodeURIComponent(url) + '/></p>&u=' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on myspace"><img src="/Assets/images/myspace.gif" alt="MySpace icon" /> MySpace</a></li>');

    element.innerHTML = widgetHTML.join('');
    }
    function SharingWidget(FileId, AssetType) {
    var trackingUrl = "/Share/" + AssetType + "/" + FileId;
    if (window.urchinTracker)
    urchinTracker(trackingUrl);
    }

    function DownloadTracker() {
    if (document.getElementById("downloadType").value != "") {
    var trackingUrl = "/Downloads/" + document.getElementById("downloadType").value + "/" + document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnFileID').value;
    if (window.urchinTracker)
    urchinTracker(trackingUrl);
    }
    }
    function ViewTracker(FileId, AssetType) {

    var trackingUrl = "/View/" + AssetType + "/" + FileId;
    if (window.urchinTracker)
    urchinTracker(trackingUrl);
    }

    function downloadasset() {
    debugger;
    //DownloadTracker();
    var dURL = "/Pages/FileDownload.aspx?file=" + document.getElementById('<%# hdnURL.ClientID %>').value;
    //var dURL = document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnAssetDownloadPage').value + "?url=" + document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnURL').value;
    window.open(dURL);
    }


    </script>

  4. #4
    Join Date
    May 2011
    Posts
    3
    Quote Originally Posted by cbVision View Post
    Solved my own problem on this one! I decided to take a look at how lightbox does it and realized it's pretty simple. Just append the body like so:

    Code:
    $('body').append('<div class="overlay"></div>');

    hi will you please guide me how to add in javascript . i had also same problem.
    below is my code.


    <script type="text/javascript">
    function displayimagepopup(ImageURL, FileID, ContentTitle, ContentDescription, DownloadURL) {
    document.getElementById('<%# hdnFileID.ClientID %>').value = FileID;
    document.getElementById('<%# hdnURL.ClientID %>').value = DownloadURL;
    document.getElementById("imageDisplay").src = "";
    document.getElementById("imageDisplay").src = ImageURL;
    document.getElementById("pBriefInfo").innerHTML = "<strong>" + ContentTitle + "</strong><br/>";
    document.getElementById("pimageDisplay").style.display = "inline";
    document.getElementById("pvideoDisplay").style.display = "none";
    if (DownloadURL == null || DownloadURL == "") {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "none";
    }
    else {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "inline";
    document.getElementById("downloadType").value = "Image";
    }
    var detailsPage = document.getElementById('<%# hdnAssetDetailsPage.ClientID %>').value;
    loadWidgets(detailsPage + "?Type=Image&KeyID=" + FileID, ContentTitle, ContentDescription, FileID, "Image");
    ViewTracker(FileID, "Image");
    loadPopup();
    }

    function displayvideopopup(VideoURL, FileID, ContentTitle, ContentDescription, DownloadURL) {
    debugger;
    document.getElementById('<%# hdnFileID.ClientID %>').value = FileID;
    document.getElementById('<%# hdnURL.ClientID %>').value = DownloadURL;

    var embedTag = document.getElementById("embedURL");
    var oParent = embedTag.parentNode;
    oParent.removeChild(embedTag);

    var oEmbed = oParent.appendChild(document.createElement('embed'));
    oEmbed.src = VideoURL; /*Or next avi file in the list*/;
    oEmbed.autoplay = "false";
    oEmbed.id = "embedURL";
    oEmbed.allowscriptaccess = "always";
    oEmbed.allowfullscreen = "true";
    oEmbed.width = "320";
    oEmbed.height = "240";

    document.getElementById("pBriefInfo").innerHTML = "<strong>" + ContentTitle + "</strong><br/>";
    document.getElementById("pimageDisplay").style.display = "none";
    document.getElementById("pvideoDisplay").style.display = "inline";
    if (DownloadURL == null || DownloadURL == "") {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "none";
    }
    else {
    document.getElementById('<%# btnDownload.ClientID %>').style.display = "inline";
    document.getElementById("downloadType").value = "Video";
    }
    var detailsPage = document.getElementById('<%# hdnAssetDetailsPage.ClientID %>').value;
    loadWidgets(detailsPage + "?Type=Video&KeyID=" + FileID, ContentTitle, ContentDescription, FileID, "Video");
    ViewTracker(FileID, "Video");
    loadPopup();
    }

    function loadWidgets(url, title, description, FileID, AssetType) {
    var widgetHTML = [];
    var element = document.getElementById("ulWidgets");
    widgetHTML.push('<li><a target="_blank" href="http://www.facebook.com/share.php?u=' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on facebook"><img src="/Assets/images/fb.gif" alt="facebook icon" /> Facebook</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://twitter.com/home?status=Currently reading ' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on Twitter"><img src="/Assets/images/tweet.gif" alt="twitter icon" /> Twitter</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://delicious.com/save?v=5&noui&jump=close&url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on delicious")"><img src="/Assets/images/del.gif" alt="delicious icon" /> Delicious</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://digg.com/submit?phase=2&url=' + encodeURIComponent(url) + '/" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on digg"><img src="/Assets/images/tu.gif" alt="digg icon" /> Digg</a></li>');
    widgetHTML.push('<li><a target="_blank" href="http://www.myspace.com/index.cfm?fuseaction=postto&t=' + encodeURIComponent(title) + '&c=<p><img src=' + encodeURIComponent(url) + '/></p>&u=' + encodeURIComponent(url) + '" onclick="javascript:SharingWidget(' + FileID + ',\'' + AssetType + '\'); return true;" title="Click to share this post on myspace"><img src="/Assets/images/myspace.gif" alt="MySpace icon" /> MySpace</a></li>');

    element.innerHTML = widgetHTML.join('');
    }
    function SharingWidget(FileId, AssetType) {
    var trackingUrl = "/Share/" + AssetType + "/" + FileId;
    if (window.urchinTracker)
    urchinTracker(trackingUrl);
    }

    function DownloadTracker() {
    if (document.getElementById("downloadType").value != "") {
    var trackingUrl = "/Downloads/" + document.getElementById("downloadType").value + "/" + document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnFileID').value;
    if (window.urchinTracker)
    urchinTracker(trackingUrl);
    }
    }
    function ViewTracker(FileId, AssetType) {

    var trackingUrl = "/View/" + AssetType + "/" + FileId;
    if (window.urchinTracker)
    urchinTracker(trackingUrl);
    }

    function downloadasset() {
    debugger;
    //DownloadTracker();
    var dURL = "/Pages/FileDownload.aspx?file=" + document.getElementById('<%# hdnURL.ClientID %>').value;
    //var dURL = document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnAssetDownloadPage').value + "?url=" + document.getElementById('ctl00_PlaceHolderMain_AnalyticsUC_hdnURL').value;
    window.open(dURL);
    }


    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles