I am new to JQuery
This thread is a half-duplicate of my older thread
The main problem is that I want to create a box around the current item to which mouse is pointing, and when mouse leaves that item the box will disappear.
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div class="clickable" url="http://www.google.com">
Google
</div>
<div class="clickable" url="http://www.bing.com">
Bing
</div>
<script type="text/javascript">
$("div.clickable").mouseover(function () {
// $(this).css("outline-style", "solid");
// $(this).css("outline-color", "Navy");
// $(this).css("outline-width", "thin");
$("#div.clickable").each(function () { $(this).removeClass("Selected") });
$(this).addClass("Selected");
});
</script>
<script type="text/javascript">
$("div.clickable").click(
function () {
window.location = $(this).attr("url");
});
</script>
And Style would be
.clickable
{
cursor:pointer;
cursor: hand;
}
.Selected
{
outline-style:solid;
outline-color:Navy;
outline-width:thin;
}
Yet it is not working when mouse goes over the other item. it does not clear the outline of the previous item.
Just use CSS pseudo class :hover:
DEMO
.clickable:hover{outline:thin solid navy}
You can do this with pure css:
.clickable:hover{
outline-style:solid;
outline-color:Navy;
outline-width:thin;
}
.clickable
{
cursor:pointer;
outline-style:none;
outline-color:transaprent;
outline-width:none;
}
no js needed.
Related
I am using bootbox.confirm with an ajax call, and I get the confirm box, but my screen is greyed out and I'm unable to select anything.
Here is what it looks like:
My first thought is that maybe my scripts are referenced wrong in _Layout, but I'm not sure:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
Bundles
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/jquery-ui.js",
"~/Scripts/Scripts.js"
);
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js"));
When inspecting here is what I have:
<body class="modal-open">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog">...</div>
Here is my script:
$(document).ready(function () {
var table = $("#Table").DataTable();
$("#Table.js-delete").on("click",
function () {
var link = $(this);
$("body").removeClass("modal-open");
bootbox.confirm("Are you sure you want to delete this?",
function (result) {
$(".modal-backdrop").remove();
if (result) {
$.ajax({
url: "/api/Informations/" + $(this).attr("data-id"),
method: "DELETE",
success: function () {
table.row(link.parents("tr")).remove().draw();
link.parents("tr").remove();
}
});
}
});
});
});
please do inspect element check out classes applied to modal and main body in your page,i'm pretty sure this is because modal-backdrop active and stucked
here are few things you can do
1) just add data-dismiss="modal" to button
2)If modal hide or visible, faded background is remained and does not let you click any where you can forcefully remove those by using below piece of code.
first hide your modal div element.
$('modalId').modal('hide');
secondly remove 'modal-open' class from body and '.modal-backdrop' at the end of the page.
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
This worked for me. You can try this please:
View:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index58</title>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootbox.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
bootbox.confirm("This is the default confirm!",
function (result) {
console.log('This was logged in the callback: ' + result);
});
})
})
</script>
</head>
<body>
<div>
<input type="button" value="ShowModal" id="btn" />
</div>
</body>
</html>
This is simple webpage with textbox and alert box to show its value on a razor view page:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
#using (Html.BeginForm())
{
<div>
#Html.Label("Enter your name")
#Html.TextBox("txtName")
</div>
<input type="button" id="btnPost" value="Load Data using Post" />
<script>
$(document).ready(function () {
//$("#txtName").keyup(function () {
// alert(this.value);
//});
var originvalue = $("#txtName").val();
$("#btnPost").click(function () {
alert(originvalue);
});
});
});
</script>
}
</body>
</html>
I have taken the textbox value and assigned it to a var originvalue. Now I want to show this value in an alert box. Is this some kind of bug? I can't figure out what is missing here.
The problem is because you only set originvalue when the page loads and the input has no value in it. If you want to retrieve the value the user typed, set that variable inside the click handler:
$(document).ready(function () {
$("#btnPost").click(function () {
var originvalue = $("#txtName").val();
console.log(originvalue);
});
});
Also note that your original JS code has one set of closing braces/brackets too many, and you should also use console.log() to debug over alert() because the former does not coerce data types.
Please replace your
$("#btnPost").click(function () {
alert(originvalue);
});
with
$("#btnPost").click(function () {
alert($("#txtName").val());
});
i used the examples given in this link
here are my code for the .aspx page
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jqueryui.css"
rel="stylesheet" type="text/css" />
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery1.5/jquery .min.js"></script>
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/jscript">
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
});
</script>
</asp:Content>
and the div for the progress bar is this one
<div style="margin-left: 10px; margin-right: 10px;" id="progressbar"> </div>
i tried to follow the instructions given on the source page but nothing worked. can you tell me what i am missing here? thanx in advance. (Fixed this part.i made a mistake at placing my contntentplaceholder)
EDIT: how can i change the value in a way so that it animates when i press a button.... the button's code in the page is as follows :
<asp:Button ID="btnConfirm" CssClass="button" SkinID="Common" runat="server"Text="Confirm"OnClick="btnConfirm_Click" />
Try this:
<script type="text/jscript">
jQuery(document).ready(function() {
jQuery("#progressbar").progressbar({ value: 37 });
});
</script>
$ is also used by asp.net for its own clientside javascript.
Consider us jQuery.noConflict()
You could encapsulate your jQuery code like this:
jQuery.noConflict();
(function($) {
$(function() {
$(document).ready(function() {
$("#progressbar").progressbar({ value: 37 });
// more code using $ as alias to jQuery
});
})(jQuery);
EDIT:
To update the value surround your content above and the button with an UpdatePanel.
Refer how to use UpdatePanels
Assign the Progress percentage to an asp literal.
jQuery.noConflict();
(function($) {
$(function() {
$(document).ready(function() {
$("#progressbar").progressbar({ value: <asp:Literal runat="server" ID="ProgressPercentage" /> });
// more code using $ as alias to jQuery
});
})(jQuery);
On button click
ProgressPercentage.Text = progress.ToString();
I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />
I have a modal popup that contains accordion and each tab contains a form which is rendered using partial view.
The problem I have is that when I toggle, the accordion doesn't expand to full height (so that I can see all the form elements). Each accordion tab only extends like 20px.
How can I get it to auto extend height based on content?
#model Models.ContentModel.ProductContent
<div id="accordion" class="accord">
<h2>
Open New Product</h2>
<div>
#Html.Partial("../PartialViews/NewProduct", Model ?? new Models.ContentModel.ProductContent())
</div>
<h2>
Manage Product</h2>
<div>
#Html.Partial("../PARTIALVIEWS/EDITProduct", Model ?? new Models.ContentModel.ProductContent())
</div>
</div>
<script type="text/javascript">
$(function () {
$("#accordion").accordion({
autoHeight: true
});
});
</script>
had to use
autoHeight: false
i would think it should be autoheight set to true but jquery don't work that way.
<script type="text/javascript">
$(function () {
$("#accordion").accordion({
autoHeight:false
});
});
</script>