works in a html page but doesnt work in aspx page

Question

sniigg 0 Light Poster

14 Years Ago

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...

asp.net javascript jquery

2 Contributors
14 Replies
196 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by sniigg

All 14 Replies

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

Show both pages.

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

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.

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

Show a link to your aspx page then.

pritaeas 2,194 ¯\_(ツ)_/¯

14 Years Ago

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.

Reply to this topic

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.

sniigg 0 Light Poster · Answer 1 · 2010-04-08T14:54:25+00:00

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 :(

sniigg 0 Light Poster · Answer 2 · 2010-04-08T15:52:21+00:00

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...

sniigg 0 Light Poster · Answer 3 · 2010-04-08T16:11:22+00:00

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">&nbsp</div>
	</li>
						<li id="Pack" runat="server">
	<div class="Properties">&nbsp 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>
						&#169; 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>

sniigg 0 Light Poster · Answer 4 · 2010-04-08T16:21:56+00:00

No, how and where can i load the scripts so that you can see...

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 5 · 2010-04-08T16:34:26+00:00

Just copy them from the originating website. Make sure that the path to file is correct.

sniigg 0 Light Poster · Answer 6 · 2010-04-08T16:39:55+00:00

sniigg 0 Light Poster

14 Years Ago

i have attached the jquery script..check it

simpla.jquery_.configuration_.js (3.51 KB)

$(document).ready(function(){
	
	//Sidebar Accordion Menu:
		
		$("#main-nav li ul").hide(); // Hide all sub menus
		$("#main-nav li a.current").parent().find("ul").slideToggle("slow"); // Slide down the current menu item's sub menu
		
		$("#main-nav li a.nav-top-item").click( // When a top menu item is clicked...
			function () {
				$(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked
				$(this).next().slideToggle("normal"); // Slide down the clicked sub menu
				return false;
			}
		);
		
		$("#main-nav li a.no-submenu").click( // When a menu item with no sub menu is clicked...
			function () {
				window.location.href=(this.href); // Just open the link instead of a sub menu
				return false;
			}
		); 

    // Sidebar Accordion Menu Hover Effect:
		
		$("#main-nav li .nav-top-item").hover(
			function () {
				$(this).stop().animate({ paddingRight: "25px" }, 200);
			}, 
			function () {
				$(this).stop().animate({ paddingRight: "15px" });
			}
		);

    //Minimize Content Box
		
		$(".content-box-header h3").css({ "cursor":"s-resize" }); // Give the h3 in Content Box Header a different cursor
		$(".closed-box .content-box-content").hide(); // Hide the content of the header if it has the class "closed"
		$(".closed-box .content-box-tabs").hide(); // Hide the tabs in the header if it has the class "closed"
		
		$(".content-box-header h3").click( // When the h3 is clicked...
			function () {
			  $(this).parent().next().toggle(); // Toggle the Content Box
			  $(this).parent().parent().toggleClass("closed-box"); // Toggle the class "closed-box" on the content box
			  $(this).parent().find(".content-box-tabs").toggle(); // Toggle the tabs
			}
		);

    // Content box tabs:
		
		$('.content-box .content-box-content div.tab-content').hide(); // Hide the content divs
		$('ul.content-box-tabs li a.default-tab').addClass('current'); // Add the class "current" to the default tab
		$('.content-box-content div.default-tab').show(); // Show the div with class "default-tab"
		
		$('.content-box ul.content-box-tabs li a').click( // When a tab is clicked...
			function() { 
				$(this).parent().siblings().find("a").removeClass('current'); // Remove "current" class from all tabs
				$(this).addClass('current'); // Add class "current" to clicked tab
				var currentTab = $(this).attr('href'); // Set variable "currentTab" to the value of href of clicked tab
				$(currentTab).siblings().hide(); // Hide all content divs
				$(currentTab).show(); // Show the content div with the id equal to the id of clicked tab
				return false; 
			}
		);

    //Close button:
		
		$(".close").click(
			function () {
				$(this).parent().fadeTo(400, 0, function () { // Links with the class "close" will close parent
					$(this).slideUp(400);
				});
				return false;
			}
		);

    // Alternating table rows:
		
		$('tbody tr:even').addClass("alt-row"); // Add class "alt-row" to even table rows

    // Check all checkboxes when the one in a table head is checked:
		
		$('.check-all').click(
			function(){
				$(this).parent().parent().parent().parent().find("input[type='checkbox']").attr('checked', $(this).is(':checked'));   
			}
		)

    // Initialise Facebox Modal window:
		
		$('a[rel*=modal]').facebox(); // Applies modal window to any link with attribute rel="modal"

    // Initialise jQuery WYSIWYG:
		
		$(".wysiwyg").wysiwyg(); // Applies WYSIWYG editor to any textarea with the class "wysiwyg"

});

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 7 · 2010-04-08T16:45:48+00:00

I already did. It looks just fine. What problems are you having now ? Have you also included the jquery script ?

sniigg 0 Light Poster · Answer 8 · 2010-04-08T16:47:59+00:00

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 · Answer 9 · 2010-04-08T16:54:35+00:00

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 · Answer 10 · 2010-04-08T16:59:17+00:00

i havnt tried it...will try it...Thanks a lot for all your help and suggestions...:)

works in a html page but doesnt work in aspx page

Recommended Answers Collapse Answers

All 14 Replies

Recommended Answers