I have a CSS flip, that activates on a button click. the issue is when I place it in the in asp.net the flip doesn't work. I dont know if the asp.net form auto refreshes any help would be appriciated.
*/The Css /*
.flip-container {
perspective: 1000px;
}
.flip-container.hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
And it works in the below format
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %>
<link rel="stylesheet" href="\_Layout\_Flip.css">
<link rel="stylesheet" href="\_Layout\_Layout.css">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
</form>
<div class="flip-container" id="FLIPDIV">
<div class="flipper">
<div class="front">
Front
<button onclick="Flip()">Flip Me!</button>
</div>
<div class="back">
Back
</div>
</div>
</div>
</body>
</html>
<script>
function Flip() {
var x = document.getElementById('FLIPDIV');
x.classList.toggle('hover');
}
</script>
As soon as I try it in an ASP.NET Form the flip does not work. I need the form for ASP:textboxes etc..
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %>
<link rel="stylesheet" href="\_Layout\_Flip.css">
<link rel="stylesheet" href="\_Layout\_Layout.css">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="flip-container" id="FLIPDIV">
<div class="flipper">
<div class="front">
Front
<button onclick="Flip()">Flip Me!</button>
</div>
<div class="back">
Back
</div>
</div>
</div>
</form>
</body>
</html>
<script>
function Flip() {
var x = document.getElementById('FLIPDIV');
x.classList.toggle('hover');
}
</script>
I am going to assume the form does some can of refresh on any button press etc.. but I am no expert any help would be amazing :)
Your button is placed within a form and it has no type attribute defined.
In this case it is assumed as type="submit", so on every click it simply submits your form and Flip() function can't show any visual changes.
Change your button this way:
<button type="button" onclick="Flip()">Flip Me!</button>
It should work now.
Related
So i am trying to create a gallery of photographs using Masonry. They may all be different sizes so i went with using % sizing instead to sort of let things pan out a bit cleaner. Now i wanted to add on info on top of the photo and also make things filterable.
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Isotope/isotope.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/masonry.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/imagesloaded.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/jquery.min.js"></script>
<script>
$('.Gallery').masonry();
</script>
<style>
img {
max-width: 33%;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="Gallery">
#foreach (var pic in Model)
{
<div class="photo-container">
<a href='#Url.Action("Details", "PhotoManagement", new { id =
pic.Id })'><img src="#pic.FilePath" typeof="image"
oncontextmenu="return false" /></a>
</div>
<script>
var $Gallery = $('.Gallery').isotope({
// options...
});
$Gallery.imagesLoaded().progress(function () {
$Gallery.isotope('layout'); });
</script>
}
</div>
</div>
</body>
Photo of the result
Any tips you guys have I would appreciate it! Also any criticisms or anything you would suggest i do to improve would also be great. I'm practicing around with c# and just trying to learn more about it all but stuff like this is frustrating to understand where i went wrong.
Side Note: i have also tried using append to append all the images and it didn't work either :(
HEAD
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/Isotope/jquery.min.js"></script>
<script src="~/Scripts/Isotope/isotope.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/masonry.pkgd.min.js"></script>
<script src="~/Scripts/Isotope/imagesloaded.pkgd.min.js"></script>
<style>
.photo-container{
width: 320px;
margin: 5px;
float: left;
}
.photo-container img {
width: 100%;
display: block;
}
</style>
BODY
`
<div>
<p></p>
<div class="Gallery">
#foreach (var pic in Model)
{
<div class="photo-container">
<a href='#Url.Action("Details", "PhotoManagement", new { id =
pic.Id })'>
<img src="#pic.FilePath" typeof="image"
oncontextmenu="return false" />
</a>
</div>
}
<script>
$(document).ready(function () {
var $grid = $('.Gallery').isotope({
itemSelector: ".photo-container",
masonry: {
columnWidth: 33
}
});
$grid.imagesLoaded().progress(function () {
$grid.isotope('layout');
})
})
</script>
</div>
</div>`
A buddy went and helped me and we got it working with the following solution. If this helps anyone else down the line
I am trying to change the text of label in master page which is inside modal and from content page i am trying to set the text.
This is my master page:
<%# Master Language="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-
scale=1, user-scalable=no" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Style/StyleSheet.css" rel="stylesheet" />
<link href="../Content/font-awesome.min.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?
family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet"
type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
<form id="Form1" runat="server">
<header>
</header>
<div class="container-fluid" id="body">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 400px;margin: 0 auto;">
<div class="modal-header" runat="server">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title"><asp:Label ID="lblMasterMessage" runat="server" Text="Label"></asp:Label> </h4>
</div>
<div class="modal-body">
<asp:Label ID="lblMasterbodyMessage" runat="server" Text="gh" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<footer class="panel-footer white">
<div class="row">
</div>
</footer>
</form>
</div>
<script src="../Scripts/bootstrap.min.js"></script>
</body>
</html>
script in child page which opens modal:
<script type="text/javascript">
function openModal(message) {
$('#myModal').modal('show');
}
</script>
code behind child page calling the script and changing text of label in modalpopup
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
Label lblMaster = (Label)Master.FindControl("lblMasterbodyMessage");
string message = "something";
lblMaster.Text = message;
i also tried the second approach by setting properties in master page but text in the popup is not getting updated. any help will be appreciated
Best approach will be to provide a get/set property in your master page that will accept value and assign it to the label value property.
Master Page
public partial class MasterPage : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string MasterBodyMessage // you can use some meaningfull name over here.
{
get { return this.lblMasterbodyMessage.Text; }
set { this.lblMasterbodyMessage.Text = value; }
}
}
Child Page
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { openModal(); });", true);
var master = this.Master as MasterPage;
if (master != null)
{
master.MasterBodyMessage = "Some Meaningful Message!!!";
}
Else you can do some work around using javascript/jQuery to add message into label in master page. For this you will need to amend following changes.
HTML Aspx Page
<div class="modal-content" style="width: 400px;margin: 0 auto;">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><label id="lblMasterMessage"></label></h4>
</div>
<div class="modal-body">
<label id="lblMasterbodyMessage"></label>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
</div>
</div>
Code Behind Page
string message = "Some Meaningful Message!!!";
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "openModal('"+ message +"');", true);
jQuery Script
<script type="text/javascript">
function openModal(message) {
$('#myModal').modal('show');
$('#lblMasterbodyMessage').html(message);
}
</script>
Specify your master page class name in TypeName attribute of MasterType directive.
<%# MasterType TypeName="MasterPageClassName" %>
Now you can access your public properties as this.Master.propertyname
Also try by moving your code from page load event to PreRenderComplete event of page.
That'll solve you're problem
I have a simple button, that when clicked should display text in a label. However when I press the button, nothing happens. Any ideas where i could be going wrong?
Default.aspx:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"%>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Button ID="testbutton" runat="server" Text="Button" OnClick="testbutton_Click" />
<asp:Label ID="testlabel" runat="server"></asp:Label>
</asp:Content>
Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void testbutton_Click(object sender, EventArgs e)
{
testlabel.Text = "You clicked the Testbutton";
}
}
Masterpage:
<%# 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>PhotoChunk</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'/>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script src="js/jquery.min.js"></script>
<!--<script src="js/jquery.easydropdown.js"></script>-->
<!--start slider -->
<link rel="stylesheet" href="css/fwslider.css" media="all" />
<script src="js/jquery-ui.min.js"></script>
<script src="js/fwslider.js"></script>
<!--end slider -->
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
$("#result").html("Selected value is: " + getSelectedValue("sample"));
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
</script>
<!----details-product-slider--->
<!-- Include the Etalage files -->
<link rel="stylesheet" href="css/etalage.css" />
<script src="js/jquery.etalage.min.js"></script>
<!-- Include the Etalage files -->
<script>
jQuery(document).ready(function($){
$('#etalage').etalage({
thumb_image_width: 600,
thumb_image_height: 400,
show_hint: true,
click_callback: function(image_anchor, instance_id){
alert('Callback example:\nYou clicked on an image with the anchor: "'+image_anchor+'"\n(in Etalage instance: "'+instance_id+'")');
}
});
// This is for the dropdown list example:
$('.dropdownlist').change(function(){
etalage_show( $(this).find('option:selected').attr('class') );
});
});
</script>
<!----//details-product-slider--->
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="header-left">
<div class="logo">
<img src="images/logowhite.png" alt=""/>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="images/nav.png" alt="" /></a>
<ul class="nav" id="nav">
<li>Browse</li>
<li>Upload</li>
<li>About</li>
</ul>
<script type="text/javascript" src="js/responsive-nav.js"></script>
</div>
<div class="clear"></div>
</div>
<div class="header_right">
<!-- start search-->
<div class="search-box">
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="What are you looking for?" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
</div>
<!----search-scripts---->
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
new UISearch(document.getElementById('sb-search'));
</script>
<!----//search-scripts---->
<ul class="icon1 sub-icon1 profile_img">
<li><a class="active-icon c1" href="#"> </a>
<ul class="sub-icon1 list">
<li class="list_img"><img src="images/1.jpg" alt=""/></li>
<li class="list_desc"><h4>Matthew Thompson</h4></li>
<li><div class="login_buttons">
<div class="check_button">Account</div>
<div class="login_button">Logout</div>
</div>
<div class="clear"></div>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="footer_box">
<h4>About PhotoChunk</h4>
<li>About Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<h4>Support</h4>
<li>Contact Us</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3">
<ul class="footer_box">
<ul class="social">
<li class="facebook"><span> </span></li>
<li class="twitter"><span> </span></li>
<li class="instagram"><span> </span></li>
<li class="pinterest"><span> </span></li>
<li class="youtube"><span> </span></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I was able to get it working!
By deleting the extra form tags found in the master page, the button now works.
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="What are you looking for?" type="search" name="search" id="search">
<input class="sb-search-submit" type="submit" value="">
<span class="sb-icon-search"> </span>
</form>
</div>
I am using this post to disable my buttons on click:
Prevent multiple form submits in MVC 3 with validation
This is my page source after it is rendered:
<!DOCTYPE html>
<html>
<head>
<title>Do not bookmark this page.</title>
<link href="/Content/reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/styer.css?t=335" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/Views/main.js" type="text/javascript"></script>
<link rel="shortcut icon" href="/Content/favicon.ico" type="image/ico" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script language="javascript" type="text/javascript">
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$('input[type="submit"]').attr('disabled', 'disabled');
}
});
});
</script>
</head>
<body>
<div class="page">
<div id="header">
<div id="headerimg"></div>
<div id="logindisplay">
[ Log On ]
</div>
<div id="menucontainer">
<ul id="menu">
<li>Home</li>
<li>Logon</li>
<li>Register</li>
<li>Contact Us</li>
<li>News</li>
</ul>
</div>
<div id="main">
<h2>Forgot Username</h2>
<p>
Please provide the email address on your web account. Once validated, your username will be sent to your email address for your records.
</p>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<form action="/Account/ForgotUsername" method="post"> <div>
<fieldset>
<legend>Email address</legend>
<div class="editor-label">
<label for="EmailAddress">Email</label>
</div>
<div class="editor-field focus">
<input class="GenericTextBox" data-val="true" data-val-length="The Email must be at least 7 characters long." data-val-length-max="100" data-val-length-min="7" id="EmailAddress" name="EmailAddress" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
</div>
<p>
<input id="btn" class="makePaymentInput" type="submit" value="Submit"/>
</p>
</fieldset>
</div>
</form>
<div style="clear: both;"></div>
</div>
<div id="footer">
</div>
</div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project = 9150358;
var sc_invisible = 1;
var sc_security = "1af31df9";
var scJsHost = (("https:" == document.location.protocol) ? "https://secure." : "http://www.");
document.write("<sc" + "ript type='text/javascript' src='" + scJsHost + "statcounter.com/counter/counter.js'></" + "script>");
</script>
<noscript>
<div class="statcounter"><a title="web analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/9150358/0/1af31df9/1/" alt="web analytics"></a></div>
</noscript>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer"}
</script>
<script type="text/javascript" src="http://localhost:25759/610299fe88d74cee8d0267b4fc859da0/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
This works on most forms but this one, which is the main reason I used this code.
Anyone see why this one is not working?
Instead of writing this :-
$('input[type="submit"]').attr('disabled', 'disabled');
You should write this :-
$('input[type="submit"]').prop('disabled','true');
I have layout page for my mvc webpage where i have done the stuff like.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="page">
<div id="header">
<div>
#{
SessionDetail sess = new SessionDetail();
ICacheProvider cache = (ICacheProvider)DIConfig.GetInstance("cacheprovider");
sess = (SessionDetail)cache.Get(Session["usersession"].ToString());
}
<div id="menu" align="right">
<li class="first" style="list-style-type: none;">Welcome <b>**#sess.DisplayName**</b>! |#Html.ActionLink("Logout","Logout","Account")</li>
</div>
<div class="site-title">
<h2>Dheutto</h2>
</div>
</div>
<div align="right">#Html.ActionLink("Show Devices","Index","Device")</div>
</div>
</body>
</html>
Now from here i have the session details in sess object. Is it possible for me to carry the value in sess object to all the view pages that render under this layout page?