I spent > 8 hours today just to make my slide works but unfortunately it didn't work.It only display the 4 static images.. Why it doesn't work? Can anybody tell me? Here is my code.
asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function() {
$("#slides").slides({
preload: true
});
});
</script>
.........................
<div id="slides">
<div class="slides_container">
<div> <img src= "folder/6.jpg" /></div>
<div><img src="folder/7.jpg" /></div>
<div><img src="folder/extreme.jpg" /></div>
<div><img src="folder/alza.jpg" /></div>
</div>
</div>
Someone who knows my problem, please help me. Appreciate that. Have a nice Tuesday :)
I assume you make use of SlideJS? If I am correct - have a look at this demo code - which worked for me
<style type="text/css" media="screen">
.slides_container
{
width: 570px;
height: 270px;
}
.slides_container div
{
width: 570px;
height: 270px;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- downloaded from SlideJS and put it in a js folder -->
<script src="js/slides.min.jquery.js"></script>
<script>
$(function () {
$("#slides").slides({
preload: true
});
});
</script>
<div id="slides">
<div class="slides_container">
<div>
<img src="pic/1.jpg" /></div>
<div>
<img src="pic/2.jpg" /></div>
<div>
<img src="pic/3.jpg" /></div>
<div>
<img src="pic/4.jpg" /></div>
</div>
</div>
Related
I'm trying to develop a web server application where an external webcam streams video so the client can capture an image from the video stream with a capture button, and if its possible apply some filters with the Accord.NET framework... I just need the webcam stram and the image capture so I can convert it to bitmap... Do someone know how can I do that?
I tried with a jquery plugin but I dont know why it doesn't work. Heres the code I have in imageprocessing.aspx page:
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="imageprocessing.aspx.cs" Inherits="SpaceExplorationWeb.imageprocessing" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<title>Image Processing</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/imageprocessing.aspx") %>';
$(function () {
jQuery("#webcam").webcam({
width: 320,
height: 240,
mode: "save",
swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
debug: function (type, status) {
$('#camStatus').append(type + ": " + status + '<br /><br />');
},
onSave: function (data) {
$.ajax({
type: "POST",
url: pageUrl + "/GetCapturedImage",
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("[id*=imgCapture]").css("visibility", "visible");
$("[id*=imgCapture]").attr("src", r.d);
},
failure: function (response) {
alert(response.d);
}
});
},
onCapture: function () {
webcam.save(pageUrl);
}
});
});
function Capture() {
webcam.capture();
return false;
}
</script>
<!--/content -->
<form runat="server">
<div class="news">
<div class="w3lnews-grid">
<div class="col-md-6 col-sm-6 news-left" >
<div id="webcam" style="height:240px; width:320px; ">
</div>
</div>
<div class="col-md-6 col-sm-6 news-right">
<h4>Real-Time Processing</h4>
<asp:DropDownList id="ddlFilters" runat="server"></asp:DropDownList>
<div class="more">
<br /><br />
<!-- <a id="applyRr" onclick="filterApplyR" href="#" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Apply<span class="glyphicon glyphicon-arrow-right"></span></a> -->
<span id="camStatus"></span>
<asp:Button ID="applyR" runat="server" class="hvr-shutter-in-vertical" Text="Apply" onClick="applyR_Click"/>
Restore<span class="glyphicon glyphicon-arrow-right"></span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="w3lnews-grid">
<div class="col-md-6 col-sm-6 news-right">
<h4>Image Processing</h4>
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<div class="more">
<br /><br />
<!-- <a id="applyRr" onclick="filterApplyR" href="#" class="hvr-shutter-in-vertical" data-toggle="modal" data-target="#myModal">Apply<span class="glyphicon glyphicon-arrow-right"></span></a> -->
<asp:Button ID="btnCapture" Text="Capture" class="hvr-shutter-in-vertical" runat="server" OnClientClick="return Capture()" />
<!-- <asp:Button ID="Button1" runat="server" class="hvr-shutter-in-vertical" Text="Capture" onClick="Button1_Click"/> -->
<asp:Button ID="btnFiltro" Text="Aplicar Filtro" class="hvr-shutter-in-vertical" runat="server" OnClick="btnFiltro_Click" />
</div>
</div>
<div class="col-md-6 col-sm-6 news-left">
<div class="wthree-almubimg">
<asp:Image ID="imgCapture" runat="server" height="438" style="align-content: center;" />
<!-- <img runat="server" id="img2" src="" alt=" " height="438" style="align-content: center;"/> -->
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</form>
<!-- //content -->
</asp:Content>
Suppose we select the row in gridview then we get the one number from gridview. Suppose we get 8 number from gridview then how to add the Eight rows in html table with textboxes. is it possible, and how it use with jquery .append(), Thanks in Advance.
I am not sure that I understand the question properly, but yes it is possble and very simple with jquery. Your script should look something like:
function appendTable(numberOfRows) {
var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
for (var i = 0; i < numberOfRows; i++) {
$('#yourTable').append(row);
}
}
Here is a complete example for add row and remove row :
<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-add").on('click', function() {
var singleRow = $(".singleRow").eq(0).clone();
singleRow.find('.btn-add')
.removeClass('btn-succcess')
.addClass('btn-danger')
.removeClass('btn-add')
.addClass('remove')
.html("X");
singleRow.find('input').each(function(i, input) {
$(input).val('');
});
$("#wrapper").append(singleRow);
});
$(document).on('click', ".remove", function() {
$(this).parent().remove();
});
});
</script>
<style type="text/css">
.singleRow {
padding: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<form role="form" autocomplete="off" id="wrapper">
<div class="row singleRow">
<div class="col-md-3">
<input class="form-control" name="name[]" type="text">
</div>
<div class="col-md-3">
<input class="form-control" name="phone[]" type="text">
</div>
<div class="col-md-1">
<select name="opt[]" class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add">
+
</button>
</div>
</form>
</div>
</body>
</html>
I am making a request and reading the HTML content. The problem is that 90% of the content is JavaScript. How can I make the request and not get the JavaScript?
You can see here that CurrentHtml (the contents of the response) has JavaScript that contains elements that I need:
<!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>
<script type="text/javascript" src="js/jwplayer.js"></script>
<script type="text/javascript"> jwplayer.key = "5yP+phROWS+QiNQny92l2iTFqbmzhyI/mT+Zsw==";</script>
<script type="text/javascript" src="js/kyop_mock.js"></script>
<script id="kyop-header" type="text/x-jquery-tmpl">
<img class="left" src="${verticalBar}" />
<img class="logoCabecera" src="${logo}" />
<div class= "clearAll"></div>
</script>
<script id="kyop-links" type="text/x-jquery-tmpl">
{{each(index, adContent) contentTop}}
<span class="enlacesWrapper">
{{if document != null}}
<span><a target="_blank" href="${document.fileUrl}" title="${contentTittle}" ratittle="${ratittle}" rapage="${rapage}">${contentTittle}</a></span>
{{else}}
{{if link != null && link != ""}}
<span><a onclick="showModalWindow('#kyop-modal-${index}');" title="${contentTittle}" ratittle="${link.ratittle}" rapage="${link.rapage}">${contentTittle}</a></span>
<div id="kyop-modal-${index}" class="kyop-container-ventanaModal" style="display: none;">
<div class="ventanaModal">
<div class="right">
<img src="img/cerrarGrandeAzul.png" onclick="closeModalWindow('#kyop-modal-${index}')" style="cursor: pointer; cursor: hand; padding-bottom: 6px;">
</div>
<div>
<iframe class="kyop-modal-iframe" src="${link.linkUrl}" frameBorder="0"></iframe>
</div>
</div>
<div class="fondoTransparente"></div>
</div>
{{else}}
<span><a title="${contentTittle}" ratittle="${ratittle}" rapage="${rapage}">${contentTittle}</a></span>
{{/if}}
{{/if}}
{{if contentIcon != null && contentIcon != ""}}
<img src="${contentIcon}" />
{{/if}}
<div class="clearAll"></div>
</span>
{{/each}}
</script>
</head>
<body>
<div id="cajacentral" class="kyop_cajacentral" >
<div id="cabecera" >
</div>
<div id="pie">
<div id="pie_derecha">
</div>
<div id="pie_izquierda">
<b>© BBVA S.A.</b>
</div>
<div class="clearAll"></div>
</div>
</div>
</body>
</html>
When you get a Page Source you will get everything which is on the page, that's obvious.
There are 2 things you can do!
Remove Javascript from main page and put in a .Js file and reference it on your HTML, so you will finally receive a html with just single line
Remove Javascript tag from HTML after you receive response
Something like this
node.parentNode.removeChild(node);
you can't request a page without JS from a server separately. because it's a file that the server send to clients. unless there is a web service that make it to you.
but you can parse the HTML file and clear JS tags easily.
a wonderful parser
I want a datepicker to show when i click my textbox, but it does not, I have done some searching and nothing helped me.
submittime.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form action="/Item/Submit" method="post">
<fieldset>
<legend>Set time</legend>
<div class ="editor-label"><label for="expire"><b>End date</b></label></div>
<div class ="editor-field"><input id="expire" name="expire" type="text" style="width: 500px; height: 20px"/></div>
<script type="text/javascript">
$(function() {
$('#expire').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
</script>
<input type="submit" value="Submit" style="width: 72px" />
</fieldset>
</form>
</asp:Content>
I have added following code to Site.Master
<link type="text/css" href="css/themename/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
It shows my textbox but no datepicker shows when i click it, any help would be nice.
You're missing the $(document).ready()
so your code should look something like this:
$(document).ready(function(){
$('#expire').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
jsFiddle example : http://jsfiddle.net/hcBL2/
Until my brain get bleeding, still I can't solve this problem. I have to use jQuery timepicker on my textbox in mvc3-View.
Inside my Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery-ui-1.8.16.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Script/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Script/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="tabs">
<ul id="menu">
<li id="menu-first-item">
#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
<div id="render">
#RenderBody()
</div>
</div>
</div>
</body>
</html>
Inside the Create View:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
<div id="page-title" class="text-indent">
<h2>
Create new shift</h2>
<div id="Optiontab">
#Html.ActionLink("Browse", "Index")
</div>
</div>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="fieldset">
<div class="editor-label">
#Html.LabelFor(model => model.WorkDuration)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.WorkDuration)
#Html.ValidationMessageFor(model => model.WorkDuration)
</div>
</div>
}
The id of the textbos is "WorkDuration". The timepicker doesn't show.
Now, what I've missed? Hope someone could help. Thanks!
**
EDIT
**
I've found the answer, this should work now:
Inside layout.cshtml
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/titoms.css")" rel="stylesheet" type="text/css" />
<link type="text/css" href="#Url.Content("~/Content/jquery-ui-titoms.css")" rel="stylesheet" />
<style type="text/css">
#ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-sliderAccess.js")"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#WorkDuration, #AbsentTrigger, #LateTrigger, #StartTime, #EndTime").timepicker({
addSliderAccess: true,
sliderAccessArgs: { touchonly: false },
showSecond: true,
timeFormat: 'hh:mm:ss'
});
});
</script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
Reference:
Timepicker theme not working
Thanks for all responses!!
There must be some issue with the naming of your WorkDuration text box.
But if the text box name definitely contains WorkDuration then the jquery attribute contains selector will apply the time picker.
From your comment below it seems that you may not have referenced your scripts correctly, Asp.Net MVC names the folder that holds the javascript files as Scripts while your code is referencing a folder named Script.
You can ensure you have the correct folder name by dragging any files you wish to reference from their folder onto your layout page.
I could get the timepicker to work by using the code below.
Scripts and CSS:
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css" />
<script src="http://jqueryui.com/jquery-1.7.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.datepicker.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
HTML:
<input type="text" id="WorkDuration" name="example_WorkDuration" />
JQuery:
<script type="text/javascript">
$(document).ready(function () {
$('input[name*="WorkDuration"]').timepicker({});
});
</script>
Have you tried without, the timepicker addon, and used just simply datepicker?
like this:
$( "#WorkDuration" ).datepicker();
Instead of:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').timepicker({});
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function () {
$('#WorkDuration').datepicker();
});
</script>
This should work
use this jquery:
jquery.ptTimeSelect.js
Time:
$(document).ready(function () {
var uId = 'ptTimeSelect_' + jQuery.ptTimeSelect._counter;
$("#incidenttime").ptTimeSelect();
$("#incidenttime").click(function () { $.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").focus(function () { jQuery.ptTimeSelect.openCntr('' + uId + ''); });
$("#incidenttime").keypress(function (event) {
if (event.keyCode == 13) {
jQuery.ptTimeSelect.setTime();
return false;
}
});
});
It is a best way i think so.