I want to load website pages with slide effect similar abnieh.
It means when you are click the menu elements, the page changes with slide effect.
I use Umbraco CMS, ASP.NET Web Form and C#.NET.
How can I do it?
Please help me.
a part of my main master page is:
<form id="AbniyehMainForm" runat="server">
<div id="MasterMaster" style="width: 100%;">
<div>
<asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderDefault">
<div>
<uc1:HeaderControl runat="server" ID="HeaderControl" />
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="homePageContent"></asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="aboutUsContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="serviceSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="projectSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="newsSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="contactUsSectionContent">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
<div>
<asp:ContentPlaceHolder runat="server" ID="languagesContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="menuContent">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
You will need to use a client side javascript effect, Most likely with jQuery and load the pages using ajax then slide the page in after it is loaded. I found this Project that looks like it will do what you want and here is a sample from a tutorial.
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
And here is how you load a page via ajax from the jQuery website.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
$( "#new-nav" ).load( "/ #jq-footerNavigation li" );
</script>
</body>
</html>
Related
I am trying to jQuery tabs in C#. Here is the script sources and stylesheet which I included:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="Styles/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#reportTabs").tabs();
});
</script>
And here is where I set up my jQuery tabs:
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
</div>
<div id="exeDiv" runat="server">
</div>
<div id="dueDiv" runat="server">
</div>
</div>
But somehow when I try to run the page, it tells me an error message which is: mismatching fragment identifier. I wonder which part went wrong?
Thanks in advance.
Change the HTML and try, hopefully it should work, I guess mainContent_ in href is playing culprit
<div id="reportTabs">
<ul>
<li>By Region</li>
<li>Execution Status Report</li>
<li>Due in 30 Days</li>
<li>Due in 30-90 Days</li>
<li>By Service Area</li>
</ul>
<div id="statusDiv" runat="server">
1
</div>
<div id="exeDiv" runat="server">
2
</div>
<div id="dueDiv" runat="server">
3
</div>
<div id="rangeDiv" runat="server">
4
</div>
<div id="areaDiv" runat="server">
5
</div>
</div>
Demo: http://jsfiddle.net/TLB79/
Please check external resources for JS and CSS URL
Call me a noob, but I am terrible at styling. Not my forte. But anyways, on my CSS page I need to have my MasterPage Navigation bar be on the left side.
But when I click on the link to bring me to different page, it has to show up in the middle with the navigation on the left still.
Is this more then just styling? If it is, please help.
Here is my asp code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="~/MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Travis's Master Page = Resume Information</title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="Stylesheet" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="header" >
<asp:Image ID="Image1" runat="server" Height="99px"
ImageUrl="./Pictures/city2.jpg" Width="70px" />
</div>
<div id="sidebar" >
<asp:HyperLink ID="Home" runat="server"
NavigationUrl="./Default.aspx" CssClass="link">Home</asp:HyperLink>
<br /><br />
Education
<asp:HyperLink ID="Proficiencies" runat="server"
NavigationUrl="./Default3.aspx" CssClass="link">IT Proficiencies</asp:HyperLink>
<br /><br />
<asp:HyperLink ID="Involvement" runat="server"
NavigationUrl="./Default4.aspx" CssClass="link">Community Involvement</asp:HyperLink>
<br /><br />
<asp:HyperLink ID="References" runat="server"
NavigationUrl="./Default5.aspx" CssClass="link">References</asp:HyperLink>
<br /><br />
</div>
<div id="main">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="message">
<asp:Label ID="lblMessage" runat="server" Text="This is a Label" CssClass="label"></asp:Label>
<br />
</div>
</div>
</form>
</body>
</html>
And laugh if you want, but this is about as far as i can get with styling.
Body
{
}
Aside
{
}
Footer
{
}
Any help with this will be greatly appreciated. I know this is probably just very basic stuff, but I would like a helping hand.
Thanks!
EDIT: Right now, as it currently stands, it is all on the left side. The information that is entered in on other pages still shows up on the navigation bar. I can't get it to show up in the middle.
the fix would be to use floats:
set your sidebar to float:left.
set your main to float:right:
after your main div add: <div style="clear: both;"></div>
this should do the trick.
here is a very very simple jsfiddle that demostrates it:
http://jsfiddle.net/LM3xp/
I have a simple .aspx page and a textbox which I want to maske It using jquery.maskedinput-1.3.js and my page .aspx code is as follows , the issue is on first page load I the textbox is masked , but after an asyncPostback the masked input plugin is not working ! how can I make the masked input plugin working ? thx in advance .
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
<script type='text/javascript'>
jQuery(function ($) {
$("#txtMembershipCode").mask("999-9999-999-9999");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="float: right" id="exDiv">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float: right; width: 120px; font-family: Tahoma">
membership Code :</div>
<div style="float: left">
<asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" ClientIDMode="Static"
dir="ltr"></asp:TextBox>
</div>
<div style="font-family: Tahoma; float: left">
<asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
<div style="font-family: Tahoma; float: right">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="Images/484.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
I have tried many different ways on the web but none of them are working !
Here is one way of solving this -
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.maskedinput-1.3.js" type="text/javascript"></script>
<script type='text/javascript'>
window.onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
}
function endRequestHandler(sender, args) {
init();
}
function init() {
$("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
}
$(function() { // DOM ready
init();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="float: right" id="exDiv">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float: right; width: 120px; font-family: Tahoma">
membership Code :</div>
<div style="float: left">
<asp:TextBox ID="txtMembershipCode" runat="server" CssClass="input" dir="ltr"></asp:TextBox>
</div>
<div style="font-family: Tahoma; float: left">
<asp:Button ID="btn" runat="server" Text="save" OnClick="btn_Click" CssClass="mybtn" /></div>
<div style="font-family: Tahoma; float: right">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="Images/484.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
This approach uses the Sys.WebForms.PageRequestManager JavaScript class and is possible because you have a Script Manager on your .aspx page. Basically after every async postback the init() function will be called.
Notice the init() function is also called in DOM ready. This allows you to do everything to the DOM you need done again after content has changed during the async postback. I have used this technique before using various jQuery plugins including this one.
I used function pageLoad
<script type='text/javascript'>
function pageLoad() {
$("#<%=txtMembershipCode.ClientID %>").mask("999-9999-999-9999");
}
</script>
I have a ASP.NET Application with a master site and content sites. in one of this content sites I have a Div with Controls and I want to try it make draggable with jQuery but I don't know how I can to this in ASP.NET because of the Control Id in asp.
here is my code:
master site:
...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Script/jquery-ui.js" type="text/javascript"></script>
<script>
$(function () {
$("#create_box").draggable();
});
</script>
</head>
<body>
<form id="mainform" runat="server">
<div class="gastzugang">
<asp:ContentPlaceHolder ID="lw_header" runat="server">
<!--Header-->
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="lw_content" runat="server">
<!--Content-->
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="lw_footer" runat="server">
<!--Footer-->
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
My Content Site:
<%# Page Title="" Language="C#" MasterPageFile="~/master.Master" AutoEventWireup="true" CodeBehind="CreateUser.aspx.cs" Inherits="lw_gastzugang.CreateUser" %>
<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
<div class="createuser">
<div class="create_box">
<div class="newUser">
Benutzer Anlegen <br/>
<br/>
//Here are my Controls
<br/>
<asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen"
onclick="btnAnlegen_Click" />
</div>
</div>
</div>
</asp:Content>
I want to this:
http://jqueryui.com/droppable/
Just use jQuery UI draggable.
Make
ClientIDMode="static" in the asp.net Tag
Or Use
<script type="text/javascript">
$('#'+'<%=lw_content.ClientID%>').draggable();
</script>
You could take a look at hammer.js which covers a 'drag' style event:
https://github.com/EightMedia/hammer.js
The drag example there is at:
http://eightmedia.github.com/hammer.js/drag/
Now I don't know too much about ASP.NET but what I would try is applying the drag behaviour to anything with a .draggable class.
Hope that helps a little!
I have an image control on ASPX page. I want to show "Change Picture" option on top it like Facebook. When click on it should go different page.
Any idea how to do this?
Try this code
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#profile_pic_wrapper{ position:relative; border:#ccc solid 1px; width:200px; height:200px;}
#profile_pic_wrapper a{ position:absolute; display:none; top:0; right:0; line-height:20px; padding:5px; color:#fff; background-color:#333; text-decoration:underline;}
#profile_pic_wrapper:hover a{ display:block; }
#profile_pic_wrapper:hover a:hover{text-decoration:none;}
.profile_pic{ width:200px; height:200px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="profile_pic_wrapper">
<asp:Image ID="imgProfilePic" runat="server" ImageUrl="profile.jpg" CssClass="profile_pic"/>
<asp:HyperLink ID="lnkChangePicture" runat="server" NavigateUrl="ChangeProfilePic.aspx">Change Picture</asp:HyperLink>
</div>
</div>
</form>
</body>
In the above example, I've included the css styles in aspx page for illustrative purpose only. For real world implementation, it is always recommended to have your styles in a separate css file.
May be this is some thing you want:
http://demo.fearlessflyer.com/html/demo/pretty-hovers/
http://thirdroute.com/projects/captify/
Hope this helps.
You can find a how-to here http://www.dreamweavertutorial.co.uk/dreamweaver/articles/transparent-layer-overlay.htm
They are called overlays.
Another example here
http://css-tricks.com/3118-text-blocks-over-image/
You would need some client-side code to actually manage the mouseover event and then to show the overlayed A tag (with the text/image you want)
Wrap the imagebutton in a div and tie jquery handlers to show or hide the link.
Edit: Here is a simple example:
<head runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="mynamediv" style="width: 50px;">
<div id="mydiv" style="display: none;">Change Image</div>
<asp:ImageButton runat="server" ID="myimage" ImageUrl="~/myimage.gif" />
</div>
</form>
<script language="javascript">
$("#mynamediv").mouseover(function () {
$("#mydiv").show();
});
$("#mynamediv").mouseout(function () {
$("#mydiv").hide();
});
</script>
Here's a balloon tip you might like
http://file.urin.take-uma.net/jquery.balloon.js-Demo.html