I have looked at:
The resizable control,
and this forum link,
all without finding the proper resolution.
I have a page (without a master page) that has 2 columns. Once column houses a menu structure, and the other a PDF viewer.
I want to be able to hide the menu, and expand the PDFviewer to the full page.
Unfortunately, I currently only have the Hide() option working.
Here is some code:
Style Sheet.css
body {
}
.wrapper {
margin: 0 auto;
}
.left {
width: 25%;
float: left;
background: #f4f4f4;
overflow: hidden;
}
.right {
width: 75%;
float: right;
margin-top: -20px;
padding-top: -20px;
}
Default.aspx
<div class="wrapper">
<div runat="server" id="left" class="left">
<div style="padding-top: 10px">
<asp:Label runat="server" Text="File List" Font-Size="20px" Font-Bold="True"></asp:Label>
- <a id="uploadLink" href="Upload.aspx">Upload</a>
<br />
<br />
<!-- Menu structure -->
</div>
</div>
<div class="right" id="right">
<a id="showh1">+</a>
<a id="hideh1">-</a>
<div style="border: 1px solid grey;">
<iframe runat="server" id="pdfHolder" width="100%" seamless="seamless" title="Doc"></iframe>
</div>
</div>
<asp:Label runat="server" ID="lbltest" Text=" ---- " Visible="False"></asp:Label>
</div>
Javascript snippet on Default.aspx
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
});
});
</script>
How can I correctly do this?
Try this:
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
$('div.right').css("width", "100%");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
$('div.right').css("width", "75%");
});
});
</script>
Related
The HTML code for this form (left hand side) is like below.
<div class="lp-element lp-pom-form" id="lp-pom-form-410">
<form action="#" method="POST">
<div class="lp-pom-form-field clearfix" id="container_name">
<input type="text" id="name" name="name" class="text form_elem_name" placeholder="Name">
</div>
<div class="lp-pom-form-field clearfix" id="container_email">
<input type="text" id="email" name="email" class="text form_elem_email" placeholder="Email">
</div>
</form>
<a class="lp-element lp-pom-button" id="lp-pom-button-411" href="#"><span class="label">GET MY DEMO</span></a>
</div>
I am trying to convert it to aspx and the back-end code for it into vb.net shown below.
<form id="form1" runat="server">
<asp:Panel runat="server" ID="uxForm">
<div class="lp-pom-form-field clearfix" id="container_name">
<asp:TextBox ID="uxName" runat="server" CssClass="text form_elem_name" placeholder="Name" />
</div>
<div class="lp-pom-form-field clearfix" id="container_email">
<asp:TextBox ID="uxEmail" runat="server" CssClass="text form_elem_email" placeholder="Email" />
</div>
</asp:Panel>
</form>
The problem is that I cannot convert the get my demo button in to asp button.
I have tried the following:
<asp:LinkButton runat="server" ID="btnSave" CssClass="lp-element lp-pom-button" Text="Get My Demo" />
but it just become invisible like the picture (right hand side form)
I have also tried
<a class="lp-element lp-pom-button" id="save" runat="server"><span class="label">GET MY DEMO</span></a>
But then also the button goes invisible and the text get my demo is in the name field as shown in the 2nd picture.
What has gone wrong and how can I correct it? the button goes invisible..even without css class
For your information I have not created the vb.net codes yet. Could that be the issue?
CSS
#lp-pom-button-411 {
display:block;
border-style:none;
behavior:url(/PIE.htc);
border-radius:9px;
left:0px;
top:251px;
z-index:16;
width:348px;
height:50px;
position:absolute;
background-color:#f7941d;
background:-webkit-linear-gradient(#fd494b,#fb2c2f);
background:-moz-linear-gradient(#fd494b,#fb2c2f);
background:-ms-linear-gradient(#fd494b,#fb2c2f);
background:-o-linear-gradient(#fd494b,#fb2c2f);
background:linear-gradient(#fd494b,#fb2c2f);
box-shadow:inset 0px 1px 0px #ff9697,inset 0 -1px 2px #c72325;
text-shadow:1px 1px #7a0404;
-pie-background:linear-gradient(#fd494b,#fb2c2f);
color:#fff;
border-width:undefinedpx;
border-color:#undefined;
font-size:25px;
line-height:30px;
font-weight:bold;
font-family:Raleway;
text-align:center;
background-repeat:no-repeat;
}
.button{
display: inline-block;
padding: 17px 34px;
border: 3px solid #fff;
color: #fff;
font-size: 22px;
font-weight: bold;
text-decoration: none;
height: 52px;
width: 123px;
font-family: 'Lato', sans-serif;
background: red;
background: -webkit-linear-gradient(#fe4d4f, #fb2d2e);
background: -o-linear-gradient(#fe4d4f, #fb2d2e);
background: -moz-linear-gradient(#fe4d4f, #fb2d2e);
background: linear-gradient(#fe4d4f, #fb2d2e);
margin-left: 49px;
text-shadow: #000000 1px 0px 1px;
}
.button:hover{
background: red;
background: -webkit-linear-gradient(#f13839, #ee2526);
background: -o-linear-gradient(#f13839, #ee2526);
background: -moz-linear-gradient(#f13839, #ee2526);
background: linear-gradient(#f13839, #ee2526);
}
picture 3
Try this:
<asp:LinkButton runat="server" ID="btnGetDemo" CssClass="lp-element lp-pom-button lp-pom-button-411"><span class="label">GET MY DEMO</span></asp:LinkButton>
My guess is that the "label" class on the span has something to do with it.
EDIT:
I changed the LinkButton markup a bit AND do change the CSS aswell to:
.lp-pom-button-411 {
display:block;
border-style:none;
behavior:url(/PIE.htc);
border-radius:9px;
left:0px;
top:251px;
z-index:16;
width:348px;
height:50px;
position:absolute;
background-color:#f7941d;
background:-webkit-linear-gradient(#fd494b,#fb2c2f);
background:-moz-linear-gradient(#fd494b,#fb2c2f);
background:-ms-linear-gradient(#fd494b,#fb2c2f);
background:-o-linear-gradient(#fd494b,#fb2c2f);
background:linear-gradient(#fd494b,#fb2c2f);
box-shadow:inset 0px 1px 0px #ff9697,inset 0 -1px 2px #c72325;
text-shadow:1px 1px #7a0404;
-pie-background:linear-gradient(#fd494b,#fb2c2f);
color:#fff;
border-width:undefinedpx;
border-color:#undefined;
font-size:25px;
line-height:30px;
font-weight:bold;
font-family:Raleway;
text-align:center;
background-repeat:no-repeat;
}
You are not create button event, create button evetn like this and try:
<asp:button id="btnSave" runat="server" Text="Get My Demo" CssClass="lp-element lp-pom-button" onclick="btnSave_Click">
Use this:
<form id="form1" runat="server">
<asp:Panel runat="server" ID="uxForm">
<div class="lp-pom-form-field clearfix" id="container_name">
<asp:TextBox ID="uxName" runat="server" CssClass="text form_elem_name" placeholder="Name" />
</div>
<div class="lp-pom-form-field clearfix" id="container_email">
<asp:TextBox ID="uxEmail" runat="server" CssClass="text form_elem_email" placeholder="Email" />
</div>
<asp:Button ID="btnSave" runat="server" Text="Get My Demo" CssClass="lp-element lp-pom-button" />
</asp:Panel>
</form>
I have nested divs, I have to show it in same row please help me.
Also tell me how to show the progress bar in the place of label id = "remainingcount" while processing.
Here is my code:
<div class="listbox">
<asp:Label ID="headertext" runat="server" CssClass="labelresul" Font-Bold="true" Height="50" Text="Available Filter"></asp:Label>
<span style="padding-left:10px;font-weight:700;">
<asp:HiddenField runat="server" ID="hdCount" />
<asp:Label ID="Total" runat="server" Height="50"></asp:Label>
</span>
<span style="padding-left:5px;font-weight:700;">
<asp:Label runat="server" ID="match" Visible="false" Text="Matches"></asp:Label>
<asp:Label ID="remainingcount" ForeColor="Red" Visible="false" runat="server"></asp:Label>
<asp:Label ID="remaining" runat="server" ForeColor="Red" Text="Results" Visible="true"></asp:Label>
</span>
<div id="divv">
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="updFilters" runat="server" >
<ProgressTemplate>
<center>
<asp:Panel ID="resultspanel" runat="server">
<img alt="Processing" src="Images/waiting_process.gif" />
</asp:Panel>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
Set both Div style as
.DivStyle{
Display: Inline-block;
}
add this property to both
HTML content :
<div class='container'>
<div class="align-left">left</div>
<div class="align-right">right</div>
</div>
Style as shown below
.container {
width:100%; }
.align-left {
float: left;
width:50%;
}
.align-right{
float: right;
width:50%
}
Set float for the div.
float:left
1st Way
You can use display: inline to put the two div elements inline.
Explanation: div elements are block elements, so their display style is usually display: block.
#box1 {
width: 1005px;
height: 1000px;
padding: 50px;
border: 1px solid red;
margin-left: 162px;
background-color: white;
}
#box2{
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
#box1, #box2
{
display:inline;
}
<div id="box1">
</div>
<div id="box2">
</div>
2nd way
You can wrap both the div elements in a span tag.
Explanation: span works the same way as the div, to organize and group elements. The only difference is that span is an inline element, so styling the span will not be needed. The display style of the span element is usually display: inline.
.box2 {
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
<span>
<div class="box2">
</div>
<div class="box2">
</div></span>
Note: If the span doesn't work, it means that the content of your div tags cannot fit on one line. You are going to need to resize your div tags if that happens.
Sorry, I used my own example, but if you find the snippets confusing, please ignore them. Thank you for reading my answer! It took quite some time to write this and I hope you find this helpful!
also you can do it with
----CSS----
.main-div{
display: grid;
grid-template-columns: repeat(2, 1fr)
}
----HTML----
<div class="main-div">
<div/>
<div/>
</div>
I am try to implement drag and drop of items into an MVC application, where I drag from div to another div - this div will call a post event, passing in the data-id.
I am relatively new to jQuery coding, so I may be missing something very stupid...
Code
<div id="column1" style="width: 400px; background-color: rgba(255, 0, 0, 1)">
<ul style="list-style-type: none;">
<li data-id="1">
<a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
<div id="column2" style="width: 400px; background-color: black">
<ul>
<li>
<a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
<script>
$("#column li").draggable({
revert: true,
drag: function () {
$(this).addClass("active");
var a = $(this).closest("#column").addClass("active");
},
stop: function () {
$(this).removeClass("active").closest("#column1").removeClass("active");
}
});
</script>
The above works fine, it does drag - however my issue is with dropping. Anything that has an ID that contains Column should accept drops, I tried to replicate the above for drop, but I do not even get the alert...
$("#column").droppable({
tolerance: "touch",
drop: function (event, ui) {
alert('Hello World');
var targetColumn = $(this),
move = ui.draggable,
itemId = move.attr("data-id");
$.post("Controller/Action", { id: itemId, obj: move });
}
});
Any advice?
Thanks.
Your code probably is not working well, because your selector not match any element (you have no element with id #column).
You probably want to set a class column and bind to it draggable and droppable using .column as selector.
HTML:
<div id="column1" class="column" style="width: 400px; background-color: rgba(255, 0, 0, 1)">
<ul style="list-style-type: none;">
<li data-id="1"> <a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
<div id="column2" class="column" style="width: 400px; background-color: black">
<ul>
<li> <a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
jQuery:
$(document).ready(function () {
$(".column li").draggable({
revert: true,
drag: function () {
$(this).addClass("active");
var a = $(this).closest("#column").addClass("active");
},
stop: function () {
$(this).removeClass("active").closest("#column1").removeClass("active");
}
});
$(".column li").droppable({
tolerance: "touch",
drop: function (event, ui) {
alert('Hello World');
console.log($(this))
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/CASn4/
When I click 'Share', then it opens facebook share page in a new tab. I want to show temp.jpg in left bar in this page. How to do this?
test.aspx
<div id="page-wrap">
<!-- AnythingSlider #1 -->
<ul id="slider1" style="width: 778px; height: 452px; background:#fff;">
<li>
<div style="float: left; padding-right: 35px; padding-left:50px;">
<img src="../../img/temp.jpg" style="width: 264px;
height: 377px; border: none;" />
<uc:DownloadControl ID="DownloadControl1" runat="server" PageParameters="1" />
</div>
</li>
<li>
<uc:DownloadControl ID="DownloadControl2" runat="server" PageParameters="2" />
...
DownloadControl.ascx
<div style="float: left">
<a class="icerik" id="facebookShare" runat="server" target="_blank">
<img border="0" src="images/facebook.jpg" alt="Resorts"
title="Hotels & Resortss" /> Share </a>
DownloadControl.ascx.cs
protected void Page_Load(object sender, EventArgs e)
{
facebookShare.HRef = "http://www.facebook.com/sharer.php?u=http://www.test.com/test.aspx";
}
You have to make FRAMES http://www.w3schools.com/tags/tag_frame.asp and change your link's target="_blank" to target="framename"
I have this script in Master page (it shows a panel on hover of menu element)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#<%= menu1_lbl.ClientID %>').hover(function() {
$('#<%= sub_menu1_lbl.ClientID %>').slideDown(200);
},
function() {
$('#<%= sub_menu1_lbl.ClientID %>').hide();
});
$('#<%= sub_menu1_lbl.ClientID %>').hover(function() {
$('#<%= sub_menu1_lbl.ClientID %>').show();
$('#<%= menu1_lbl.ClientID %>').addClass("menuhover");
},
function() {
$('#<%= sub_menu1_lbl.ClientID %>').hide();
$('#<%= menu1_lbl.ClientID %>').removeClass("menuhover");
});
});
</script>
it works fine on Chrome & Firefox but it doesnt work in IE. Any ideas on what should I do to make it work?
thanks in advance.
UPDATE: Here is the full client-side generated code:
<!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>
<title>Smart Finance </title>
<style type="text/css">
</style>
</head>
<body>
<form name="aspnetForm" method="post" action="ie_not_compatible.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWBAIBD2QWAgIBDxUHFi9GaW5hbmNhL2ltYWdlcy9iZy5wbmcZL0ZpbmFuY2EvaW1hZ2VzL2ltZzAzLmpwZxYvRmluYW5jYS9pbWFnZXMvYmcucG5nGS9GaW5hbmNhL2ltYWdlcy9pbWcwMi5qcGcZL0ZpbmFuY2EvaW1hZ2VzL2ltZzAyLmpwZxkvRmluYW5jYS9pbWFnZXMvaW1nMDIuanBnGS9GaW5hbmNhL2ltYWdlcy9pbWcwMi5qcGdkAgMPZBYCAgkPZBYCAgEPDxYCHgRUZXh0BQVlbmRyaWRkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYDBRhjdGwwMCRMb2dpblN0YXR1czEkY3RsMDEFGGN0bDAwJExvZ2luU3RhdHVzMSRjdGwwMwUMY3RsMDAkY29uZmlnwdDc6GaGSg1K9roW+pf9g9bwZ08=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKDjNy/AwLh8tHdBgL0/brqCByGAqyFdaUy3EVtuUCi/i44T7vY" />
</div>
<div id="menu" style="top: 12px; width: 1250px; position: relative; float: left;">
<ul>
<li>Home</li>
<li id="faturatli">Default </li>
</ul>
</div>
<div id="ctl00_sub_menu1_lbl" style="display: none; top: 137px; padding: 15px 15px 15px 15px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, .5); z-index: 99999; left: 155px; position: absolute;
float: left; width: 300px; background: #FFFFFF;">
Submenu panel
</div>
<div id="logoutcontainer" style="top: 113px; right: 50px; position: absolute;">
<div id="ctl00_Panel1" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_config')">
<span id="ctl00_userloggedin" style="color: #ADC9C9; font-size: small; font-weight: 700;">
endri</span> <a id="ctl00_LoginStatus1" href="javascript:__doPostBack('ctl00$LoginStatus1$ctl00','')"
style="color: #CCFFFF; font-size: small; font-weight: 700;">Logout</a>
<input type="image" name="ctl00$config" id="ctl00_config" src="images/config.png"
style="height: 20px; border-width: 0px;" />
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script defer="defer" type="text/javascript">
$(document).ready(function () {
"use strict";
$('#ctl00_menu1_lbl').hover(function () {
$('#ctl00_sub_menu1_lbl').slideDown(200);
}, function () {
$('#ctl00_sub_menu1_lbl').hide();
});
$('#ctl00_sub_menu1_lbl').hover(function () {
$('#ctl00_sub_menu1_lbl').show();
$('#ctl00_menu1_lbl').addClass("menuhover");
}, function () {
$('#ctl00_sub_menu1_lbl').hide();
$('#ctl00_menu1_lbl').removeClass("menuhover");
});
});
</script>
<div id="ContentDiv" style="float: left; position: relative; margin: 50px 50px 50px 50px;
text-align: left; top: 21px; left: 0px;">
<span class="style3">Not working on internet explorer.</span>
</div>
<script src="/finance/WebResource.axd?d=lLeg7eZU8UNEVWRCMptUog2&t=633750586290014532"
type="text/javascript"></script>
</form>
</body>
</html>
Hey This error usually comes when jquery library is not loaded properly.
Try to load it this way
<script type="text/javascript" src='<%=Page.ResolveUrl("http://code.jquery.com/jquery-1.7.2.min.js")%>'></script>