Hi,
I have a html document when i run in Internet explorer i am getting the desired output(j query working fine). But i copy pasted the same code in aspx page...the same code is not working properly...
sniigg 0 Light Poster
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Show both pages.
sniigg 0 Light Poster
Hi,
i am not sure if i can show both the pages bcos they are too huge ....I have been given an html document FOR EX. index.html and it has some some css and jquery files which makes the index.html works.
that index.html is working fine in all the browsers.I have to implement the features in my application. So initially to test I copied all the code from index.html and pasted it in my aspx page.Obviously i have this on topof the page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default1.aspx.cs" Inherits="Results.Default1" %>
<!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" >and when i run the page ...is not working properly...it loads properly but when i try any jquery functionality...its getting scrambled in ie7 and ie6.
I hope you understood my problem :(
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Too vague, can't you upload your pages somewhere and give the url's so we can compare them. Without it, this will turn into a guessing game.
sniigg 0 Light Poster
http://labs.simplifydigital.co.uk/template/index.html
check this link..and try closing the notifications at the end of the page....but when i implement the same code in aspx page....the notifications are goin bonkers in ie7...
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Show a link to your aspx page then.
sniigg 0 Light Poster
sorry i dunno how to upload it somewhere..so just pasting the code...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default1.aspx.cs" Inherits="Results.aspx.Default1" %>
<!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" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<!-- CSS -->
<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />
<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" />
<!-- Javascripts -->
<!-- jQuery -->
<script type="text/javascript" src="resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script>
<!-- Facebox jQuery Plugin -->
<script type="text/javascript" src="resources/scripts/facebox.js"></script>
<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script>
<!-- Internet Explorer .png-fix -->
<style runat="server" type="text/css">
/* Don't change these options */
#movableNode{
position:absolute;
}
#arrDestInditcator{
position:absolute;
display:none;
width:100px;
}
/* End options that shouldn't be changed */
#arrangableNodes,#movableNode ul{
padding-left:0px;
margin-left:0px;
margin-top:0px;
padding-top:0px;
}
#nodes li
{
list-style-type:none;
cursor:default;
border:1px solid #999;
padding:5px;
background-color:#EEE;
margin-top:2px;
height:58px;
margin-right:8px;
}
#arrangableNodes li,#movableNode li{
list-style-type:none;
cursor:default;
border:1px solid #999;
padding:5px;
background-color:#EEE;
margin-top:2px;
height:58px;
display:block;
}
img{
border:0px;
}
.Properties
{
width:150px;
height:58px;
border :1px dotted #999;
background-color:White;
float:left;
}
.block1
{
width:130px;
float:left;
border :1px dotted #999;
margin-left:5px;
height :58px;
}
.block2
{
width:400px;
float:left;
border :1px dotted #999;
margin-left:5px;
height :58px;
display:none;
}
.block3
{
width:270px;
float:left;
border :1px dotted #999;
margin-left:5px;
height :58px;
display:none;
}
.Total
{
padding-left:160px;
padding-bottom:50px;
margin-left:5px;
}
.close {
color:#990000;
font-size:9px;
position:absolute;
right:5px;
top:5px;
}
</style>
<script type="text/javascript">
var offsetYInsertDiv = -3; // Y offset for the little arrow indicating where the node should be inserted.
if (!document.all) offsetYInsertDiv = offsetYInsertDiv - 7; // No IE
var arrParent = false;
var arrMoveCont = false;
var arrMoveCounter = -1;
var arrTarget = false;
var arrNextSibling = false;
var leftPosArrangableNodes = false;
var widthArrangableNodes = false;
var nodePositionsY = new Array();
var nodeHeights = new Array();
var arrInsertDiv = false;
var insertAsFirstNode = false;
var arrNodesDestination = false;
function cancelEvent() {
return false;
}
function getTopPos(inputObj) {
var returnValue = inputObj.offsetTop;
while ((inputObj = inputObj.offsetParent) != null) {
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function getLeftPos(inputObj) {
var returnValue = inputObj.offsetLeft;
while ((inputObj = inputObj.offsetParent) != null) returnValue += inputObj.offsetLeft;
return returnValue;
}
function clearMovableDiv() {
if (arrMoveCont.getElementsByTagName('LI').length > 0) {
if (arrNextSibling) arrParent.insertBefore(arrTarget, arrNextSibling); else arrParent.appendChild(arrTarget);
}
}
function initMoveNode(e) {
clearMovableDiv();
if (document.all) e = event;
arrMoveCounter = 0;
arrTarget = this;
if (this.nextSibling) arrNextSibling = this.nextSibling; else arrNextSibling = false;
timerMoveNode();
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = (e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop)) + 'px';
return false;
}
function timerMoveNode() {
if (arrMoveCounter >= 0 && arrMoveCounter < 10) {
arrMoveCounter = arrMoveCounter + 1;
setTimeout('timerMoveNode()', 20);
}
if (arrMoveCounter >= 10) {
arrMoveCont.appendChild(arrTarget);
}
}
function arrangeNodeMove(e) {
if (document.all) e = event;
if (arrMoveCounter < 10) return;
if (document.all && arrMoveCounter >= 10 && e.button != 1 && navigator.userAgent.indexOf('Opera') == -1) {
arrangeNodeStopMove();
}
arrMoveCont.parentNode.style.left = e.clientX + 'px';
arrMoveCont.parentNode.style.top = (e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop)) + 'px';
var tmpY = e.clientY + Math.max(document.body.scrollTop, document.documentElement.scrollTop);
arrInsertDiv.style.display = 'none';
arrNodesDestination = false;
if (e.clientX < leftPosArrangableNodes || e.clientX > leftPosArrangableNodes + widthArrangableNodes) return;
var subs = arrParent.getElementsByTagName('LI');
for (var no = 0; no < subs.length; no++) {
var topPos = getTopPos(subs[no]);
var tmpHeight = subs[no].offsetHeight;
if (no == 0) {
if (tmpY <= topPos && tmpY >= topPos - 5) {
arrInsertDiv.style.top = (topPos + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = true;
return;
}
}
if (tmpY >= topPos && tmpY <= (topPos + tmpHeight)) {
arrInsertDiv.style.top = (topPos + tmpHeight + offsetYInsertDiv) + 'px';
arrInsertDiv.style.display = 'block';
arrNodesDestination = subs[no];
insertAsFirstNode = false;
return;
}
}
}
function arrangeNodeStopMove() {
arrMoveCounter = -1;
arrInsertDiv.style.display = 'none';
if (arrNodesDestination) {
var subs = arrParent.getElementsByTagName('LI');
if (arrNodesDestination == subs[0] && insertAsFirstNode) {
arrParent.insertBefore(arrTarget, arrNodesDestination);
} else {
if (arrNodesDestination.nextSibling) {
arrParent.insertBefore(arrTarget, arrNodesDestination.nextSibling);
} else {
arrParent.appendChild(arrTarget);
}
}
}
arrNodesDestination = false;
clearMovableDiv();
}
// function saveArrangableNodes()
// {
// var nodes = arrParent.getElementsByTagName('LI');
// var string = "";
// for (var no = 0; no < nodes.length; no++)
// {
// if(string.length>0)string = string + ',';
// string = string + nodes[no].id;
// }
//
// document.forms[0].hiddenNodeIds.value = string;
//
// // Just for testing
// //document.getElementById('arrDebug').innerHTML = 'Ready to save these nodes:<br>' + string.replace(/,/g, ',<BR>');
// //document.forms[0].submit(); // Remove the comment in front of this line when you have set an action to the form.
// window.location = "Default.aspx?x=" + string;
//}
function saveArrangableNodes() {
var nodes = arrParent.getElementsByTagName('li');
var string = "";
for (var no = 0; no < nodes.length; no++) {
if (string.length > 0) string = string + ',';
string = string + nodes[no].id;
}
document.forms[0].hiddenNodeIds.value = string;
// Just for testing
//document.getElementById('arrDebug').innerHTML = 'Ready to save these nodes:<br>' + string.replace(/,/g, ',<BR>');
//document.forms[0].submit(); // Remove the comment in front of this line when you have set an action to the form.
window.location = "Default1.aspx?x=" + string;
}
function initArrangableNodes() {
arrParent = document.getElementById('arrangableNodes');
arrMoveCont = document.getElementById('movableNode').getElementsByTagName('UL')[0];
arrInsertDiv = document.getElementById('arrDestInditcator');
leftPosArrangableNodes = getLeftPos(arrParent);
arrInsertDiv.style.left = leftPosArrangableNodes - 5 + 'px';
widthArrangableNodes = arrParent.offsetWidth;
var subs = arrParent.getElementsByTagName('LI');
for (var no = 0; no < subs.length; no++) {
subs[no].onmousedown = initMoveNode;
subs[no].onselectstart = cancelEvent;
}
document.documentElement.onmouseup = arrangeNodeStopMove;
document.documentElement.onmousemove = arrangeNodeMove;
document.documentElement.onselectstart = cancelEvent;
}
window.onload = initArrangableNodes;
</script>
</head>
<body>
<div id="body-wrapper"> <!-- Wrapper for the radial gradient background -->
<div id="sidebar"><div id="sidebar-wrapper"> <!-- Sidebar with logo and menu -->
<h1 id="sidebar-title"><a href="#">Simpla Admin</a></h1>
<!-- Logo (221px wide) -->
<a href="#"><img id="logo" src="resources/images/logo.png" alt="Simpla Admin logo" /></a>
<!-- Sidebar Profile links -->
<div id="profile-links">
Hello, <a href="#" title="Edit your profile">John Doe</a>, you have <a href="#messages" rel="modal" title="3 Messages">3 Messages</a><br />
<br />
<a href="#" title="View the Site">View the Site</a> | <a href="#" title="Sign Out">Sign Out</a>
</div>
<ul id="main-nav"> <!-- Accordion Menu -->
<li>
<a href="http://www.google.com" class="nav-top-item no-submenu"> <!-- Add the class "no-submenu" to menu items with no sub menu -->
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-top-item current"> <!-- Add the class "current" to current menu item -->
Articles
</a>
<ul>
<li><a href="#">Write a new Article</a></li>
<li><a class="current" href="#">Manage Articles</a></li> <!-- Add class "current" to sub menu items also -->
<li><a href="#">Manage Comments</a></li>
<li><a href="#">Manage Categories</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-top-item">
Pages
</a>
<ul>
<li><a href="#">Create a new Page</a></li>
<li><a href="#">Manage Pages</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-top-item">
Image Gallery
</a>
<ul>
<li><a href="#">Upload Images</a></li>
<li><a href="#">Manage Galleries</a></li>
<li><a href="#">Manage Albums</a></li>
<li><a href="#">Gallery Settings</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-top-item">
Events Calendar
</a>
<ul>
<li><a href="#">Calendar Overview</a></li>
<li><a href="#">Add a new Event</a></li>
<li><a href="#">Calendar Settings</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-top-item">
Settings
</a>
<ul>
<li><a href="#">General</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Your Profile</a></li>
<li><a href="#">Users and Permissions</a></li>
</ul>
</li>
</ul> <!-- End #main-nav -->
<div id="messages" style="display: none"> <!-- Messages are shown when a link with these attributes are clicked: href="#messages" rel="modal" -->
<h3>3 Messages</h3>
<p>
<strong>17th May 2009</strong> by Admin<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
<small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
</p>
<p>
<strong>2nd May 2009</strong> by Jane Doe<br />
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
<small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
</p>
<p>
<strong>25th April 2009</strong> by Admin<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
<small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
</p>
<%-- <form action="" method="post">
<h4>New Message</h4>
<fieldset>
<textarea class="textarea" name="textfield" cols="79" rows="5"></textarea>
</fieldset>
<fieldset>
<select name="dropdown" class="small-input">
<option value="option1">Send to...</option>
<option value="option2">Everyone</option>
<option value="option3">Admin</option>
<option value="option4">Jane Doe</option>
</select>
<input class="button" type="submit" value="Send" />
</fieldset>
</form>--%>
</div> <!-- End #messages -->
</div></div> <!-- End #sidebar -->
<div id="main-content" > <!-- Main Content Section with everything -->
<noscript> <!-- Show a notification if the user has disabled javascript -->
<div class="notification error png_bg">
<div>
Javascript is disabled or is not supported by your browser. Please <a href="http://browsehappy.com/" title="Upgrade to a better browser">upgrade</a> your browser or <a href="http://www.google.com/support/bin/answer.py?answer=23852" title="Enable Javascript in your browser">enable</a> Javascript to navigate the interface properly.
</div>
</div>
</noscript>
<!-- Page Head -->
<h2>Welcome John</h2>
<p id="page-intro">What would you like to do?</p>
<ul class="shortcut-buttons-set"> <!-- Replace the icons URL's with your own -->
<li><a class="shortcut-button" href="#"><span>
<img src="~/resources/images/icons/path-to-icon.png" alt="icon" /><br />
Write an Article
</span></a></li>
<li><a class="shortcut-button" href="#"><span>
<img src="~/resources/images/icons/path-to-icon.png" alt="icon" /><br />
Create a New Page
</span></a></li>
<li><a class="shortcut-button" href="#"><span>
<img src="~/resources/images/icons/path-to-icon.png" alt="icon" /><br />
Upload an Image
</span></a></li>
<li><a class="shortcut-button" href="#"><span>
<img src="~/resources/images/icons/path-to-icon.png" alt="icon" /><br />
Add an Event
</span></a></li>
<li><a class="shortcut-button" href="#messages" rel="modal"><span>
<img src="~/resources/images/icons/path-to-icon.png" alt="icon" /><br />
Open Modal
</span></a></li>
</ul><!-- End .shortcut-buttons-set -->
<div class="clear"></div> <!-- End .clear -->
<div class="content-box" ><!-- Start Content Box -->
<div class="content-box-header">
<h3>Content box</h3>
<%--<ul class="content-box-tabs">
<li><a href="#tab1" class="default-tab">Table</a></li> <!-- href must be unique and match the id of target div -->
<li><a href="#tab2">Forms</a></li>
</ul>--%>
<div class="clear"></div>
</div> <!-- End .content-box-header -->
<div class="content-box-content">
<%--<div class="tab-content default-tab" id="tab1"> <!-- This is the target div. id must match the href of this div's tab -->--%>
<div class="notification attention png_bg">
<a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
<div>
This is a Content Box. You can put whatever you want in it. By the way, you can close this notification with the top-right cross.
</div>
</div>
<ul id="nodes" runat="server">
<li id="Img" runat="server">
<div class="Properties"> </div>
</li>
<li id="Pack" runat="server">
<div class="Properties">  Package:</div>
</li>
</ul>
<ul id="arrangableNodes" runat="server">
</ul>
<input id="Button1" type="button" value="button" onclick="saveArrangableNodes();return false" />
<%--</div> --%><!-- End #tab1 -->
</div> <!-- End .content-box-content -->
</div> <!-- End .content-box -->
<div class="content-box column-left">
<div class="content-box-header">
<h3>Content box left</h3>
</div> <!-- End .content-box-header -->
<div class="content-box-content">
<div class="tab-content default-tab">
<h4>Maecenas dignissim</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta lectus. Maecenas dignissim enim quis ipsum mattis aliquet. Maecenas id velit et elit gravida bibendum. Duis nec rutrum lorem. Donec egestas metus a risus euismod ultricies. Maecenas lacinia orci at neque commodo commodo.
</p>
</div> <!-- End #tab3 -->
</div> <!-- End .content-box-content -->
</div> <!-- End .content-box -->
<div class="content-box column-right closed-box">
<div class="content-box-header"> <!-- Add the class "closed" to the Content box header to have it closed by default -->
<h3>Content box right</h3>
</div> <!-- End .content-box-header -->
<div class="content-box-content">
<div class="tab-content default-tab">
<h4>This box is closed by default</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in porta lectus. Maecenas dignissim enim quis ipsum mattis aliquet. Maecenas id velit et elit gravida bibendum. Duis nec rutrum lorem. Donec egestas metus a risus euismod ultricies. Maecenas lacinia orci at neque commodo commodo.
</p>
</div> <!-- End #tab3 -->
</div> <!-- End .content-box-content -->
</div> <!-- End .content-box -->
<div class="clear"></div>
<!-- Start Notifications -->
<div class="notification attention png_bg">
<a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
<div>
Attention notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
</div>
</div>
<div class="notification information png_bg">
<a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
<div>
Information notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
</div>
</div>
<div class="notification success png_bg">
<a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
<div>
Success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
</div>
</div>
<div class="notification error png_bg">
<a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
<div>
Error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
</div>
</div>
<!-- End Notifications -->
<div id="footer">
<small>
© Copyright 2009 Simpla Admin | Powered by <a href="http://themeforest.net/item/simpla-admin-flexible-user-friendly-admin-skin/46073">Simpla Admin</a> | <a href="#">Top</a>
</small>
</div><!-- End #footer -->
</div> <!-- End #main-content -->
</div>
<div id="movableNode"><ul></ul></div>
<div id="arrDestInditcator"><img src="ArrowImg/insert.gif"/></div>
<div id="arrDebug"></div>
<form id="form1" runat="server" method="post" action="?????">
<input type="hidden" name="hiddenNodeIds"/>
<input type="hidden" name="hiddenBundleIds"/>
<%-- <input id="Button2" type="button" value="button" onclick="saveArrangableNodes();return false" />--%>
</form>
</body>
</html> pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Did you copy all of the scripts that are included in the head of the page ? Because, if the close button doesn't respond, the script did not load.
sniigg 0 Light Poster
No, how and where can i load the scripts so that you can see...
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Just copy them from the originating website. Make sure that the path to file is correct.
sniigg 0 Light Poster
i have attached the jquery script..check it
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
I already did. It looks just fine. What problems are you having now ? Have you also included the jquery script ?
sniigg 0 Light Poster
yes, i have used the same jquery...but when i use it in ie7...the notification tabs are getting overlapped...when i remove the first one
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Have you tried using the latest jquery version (1.4.2 instead of 1.3.2). It fixes some of these issues. Another problem could be that IE7 renders the CSS a bit differently. It could be that it needs some change to stop the overlap. (Don't have IE7 here, so can't check.)
sniigg 0 Light Poster
i havnt tried it...will try it...Thanks a lot for all your help and suggestions...:)
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.