basically i wish to achieve like user type file name,then video will be pop up
what i want to do is i was tried to pass textbox value as jwplayer path to play video
if i typed Video/video.mp3 into textbox and i click "button" , my jwplayer able to play video.mp3
what i want to do is juz typed "video" then jwplayer able to starts
by doing that i plan to use database to do checking
once user type video, then database will return jwplayer/video.mp3 and pass the value to jwplayer script, but i cant achieve that!
javascript
function playSelected() {
var a = document.getElementById("TextBox2").value;
jwplayer("mediaplayer").setup({
flashplayer: "jwplayer/player.swf",
file: a,
image: "jwplayer/preview.jpg"
});
}
button
<input type="button" runat="server" value="Click me!" onclick='playSelected()'>
textbox
<asp:TextBox ID="TextBox2" runat="server">
Declare in javascript
var a = "video/" + document.GetElementbyID("textbox2").value + ".mp3";
Then you only have to input the video name alone and the rest is added dynamically.
You could use the load method to dynamically load a movie. Here's a full example:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jwplayer</title>
</head>
<body>
<div id="mediaplayer">JW Player goes here</div>
<input type="text" id="TextBox2" value="video.mp4" />
<input type="button" onclick="playSelected()" value="Play" />
<script type="text/javascript" src="jwplayer.js"></script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "player.swf",
image: "preview.jpg"
});
var playSelected = function () {
var movie = document.getElementById('TextBox2').value;
jwplayer().load(movie).play();
};
</script>
</body>
</html>
Related
I have a jQuery UI tab control, created using asp.net repeater, and am trying to make sure on page load first tab is selected and also keep the selected tab on postbacks.
I have worked out the postback part but am having problem getting first tab's name. I have applied styling to tabs. This is what I have and what have tried:
<div id="divCategories">
<asp:Repeater runat="server" ID="rptCategories">
<HeaderTemplate>
<ul class="bronze nav nav-tabs" role="tablist">
</HeaderTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
<ItemTemplate>
<li>
<a href='#<%# Eval("Abbrev")%>' data-toggle="tab" aria-controls='<%# Eval("Abbrev")%>'>
<p class="tab title"><%# Eval("CourseCategory")%></p>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</div>
<asp:HiddenField ID="hfSelCat" runat="server" />
<script type="text/javascript">
$(function () {
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {debugger
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
if I uncomment first line in the script that initializes the tabs; I lose tab styling; if I comment it out, I get an error on next line when I try to access .tabs('option','active') because tab is not initialized yet. So, I am using hard-coded tab name ('AnOps');
Because the tab names are generated dynamically, basically I am trying to get the name of the first tab, whatever it may be.
Update (based on Dee's suggestion)
I modified the script like below; it does set the selected tab to first one but none of the styling is applied.
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
debugger
//$("#divCategories").tabs();
var tabName = $("[id*=hfSelCat]").val() != "" ? $("[id*=hfSelCat]").val() : 'AnOps';//$("#divCategories").tabs('option', 'active');
$('#divCategories a[href="#' + tabName + '"]').tab('show');
$("#divCategories a").click(function () {
$("[id*=hfSelCat]").val($(this).attr("href").replace("#", ""));
});
});
</script>
According to documentation of active option it can be specified with integer value which tab will be active at initialisation (zero will activate the first tab). If I am not wrong this is all you need to keep the first tab selected whenever the page loads. HTH
Example:
<script type="text/javascript">
$(function () {
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
To define your own look some classes of jquery-ui can be edited in Theme Roller. So you create your style-css file and link it the the page (probably master-page). Then just call tabs() function and the style will be applied. You shouldn't define style inside of the repeater yourself. Maybe this is your problem you mentioned in the comment?
First use Theme Roller and generate your style. For example I have changed the background and border of active item to black-red (pretty ugly :)).
Then save the generated files to local folder, I saved it to folder named js but the name is not important. Link the generated css files to your asp.net page. Here I have example with simple html file, but that is not important. As you can see the <ul> doesn't have any style.
Nobullman.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="js/external/jquery/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui.structure.css">
</head>
<body>
<!-- This content will be generated by the Repeater, but withou any styles -->
<div id="divCategories">
<ul>
<li>1.Tab</li>
<li>2.Tab</li>
<li>3.Tab</li>
</ul>
<div id="tabs-1">
<p>Text 123</p>
</div>
<div id="tabs-2">
<p>Text 456</p>
</div>
<div id="tabs-3">
<p>Text 789</p>
</div>
</div>
<script type="text/javascript">
$(function() {
// tabs will do the trick and create the tabs css styles inclusive
var $categories = $("#divCategories");
$categories.tabs({
active: 0
});
});
</script>
</body>
</html>
The relation of the Nobullman.html and the saved files from Theme Roller looks like this:
When this html file is loaded by browser it looks like this. The styles were applied by jquery-ui-tabs() them selves.
This is the sample code that i am learning from w3schools. This time i have given the id too to the button. Please help.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn("slower");
$("#div3").fadeIn(3000);
});
});
</script>
<title></title>
</head>
<body>
<h2>Try jQuery</h2>
<br /><button>Click me</button>
<br /><br />
<div id="div1" style="width:80px;height:80px;color:green"></div>
<div id="div2" style="width:80px;height:80px;color:yellow"></div>
<div id="div3" style="width:80px;height:80px;color:blanchedalmond"></div>
</body>
</html>
$("#hide").click(function () ...
this line of code basically means "when an element with id 'hide' is clicked, do something". So your button is missing that id
<button id="hide">Click me</button>
Just copy and paste it. It works. Tested.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-1.11.2.js"></script>-->
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();
});
});
</script>
<title></title>
</head>
<body>
<h2>Try jQuery</h2>
<p>This will get hide</p>
<button id="hide">CLick Me</button>
</body>
</html>
As others have mentioned your script is looking for something with the ID attribute 'hide' as indicated in your jQuery $('#hide').
There are many different ways to select everything in your dom. Have a look at the jquery documentation. http://api.jquery.com/category/selectors/ The simplicity of selecting dom elements is what makes jQuery so powerful in my opinion.
Select by ID:
$('#id')
You can select every even row in a table.
$('table tr:even')
You can select the 14th div element in the dom.
$('div:eq(14)')
You can select all elements with a given class.
$('.class')
Here is a JSfiddle with the code in a working fashion.
http://jsfiddle.net/5v94cnrr/
It looks like the button is ID 'hide' and it will hide all P elements on click. Typically you'd use a class called hide and hide all element with class hide on click of the button or some other action.
You have not set #hide for anything. If you need it on a button, do:
<button id="hide">CLick Me</button>
You want to hide p tag elements on onclick of button.
So firstly, you have to provide id for this button because you are making click function on button.
Try this:
<button id='hide'>Click Me</button>
I have created an Image Slider using html with Jquery. I am trying to put this image slider into a contentplaceholder on my homepage which is running off a masterpage template with c#. It is not working.
Image Slider HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Slider</title>
<style type="text/css">
.slider {
width:1025px;
height:500px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:1025px;
height:500px;
display:none;
margin:30px auto;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js"></script>
<script type="text/javascript">
function Slider() {
$(".slider #1").fadeIn("fade, 500");
$(".slider #1").delay(5500).hide("slide", { direction: 'left' }, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function (){
$(".slider #" + count).show("slide",{direction:'right'}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}
</script>
</head>
<body onload="Slider();">
<div class="slider">
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
</body>
</html>
Content Placeholder I am trying to put HTML into:
<asp:Content ID="Content3" runat="server" contentplaceholderid="ContentPlaceHolder1">
</asp:Content>
You must have a masterpage right that's why ur using a content page right ? You masterpage has already defined head / body and so on the HTML tags, so u need to just put the divs in the content place holder
<div class="slider" onload="Slider()";>
<img id="1" src="Promotion1.png" border="0" alt="Promotion one" />
<img id="2" src="Promotion2.png" border="0" alt="Promotion two" />
</div>
and your onload function call , you need to move your src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery- ui.min.js">
tag into the masterpage and put your jS in a JS file and reference it inside your masterpage ideally, you could put your JS code in the content page but this is not good practice, it just easier to create the js file and plonk in a reference in your masterpage...good luck !
First thing first, your CDN is wrong. it should be:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
notice you missed the https part. Then HTML for that single page should work by itself.
Then follow other suggestions using proper master and content tag, or comes back for more questiond :D
In a master page add the links to jquery, then add a content placeholder for the head.
Add a new page using the master page recently created. Add the function slider in that content placeholder. Remove the onload from the body and in the page use .load() using jquery to add the call.
Add a second place holder in the master to add content in the body and add your html for the slider.
Hope it helps.
I want to change some text in a text box on the change of another text box. I know it can be done using ontextchanged event. But my requirement is that for example. Lets take an example of converting meter to KM.
When I type 1000 in a text box without leaving that text box I need to have the value as 1 KM in other.
Now, I change 1000m to 3000m (without having the ontextchanged event fired up) and I should see 3 KM in the other text box.
In short I don't want the text box to be posted back. I know this can be done in Windows project but how it can be done in asp.net (web based). Is there any JavaScript or jQuery?
Please Help. Thanks in advance.
Hope this helps
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function Convert() {
var meters = jQuery("#txtMeters").val();
var kilometers = meters / 1000;
jQuery("#txtKilometers").val(kilometers);
}
</script>
<title>Solution</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Meters
<asp:TextBox ID="txtMeters" ClientIDMode="Static" runat="server" onkeyup="javascript:Convert()">
</asp:TextBox>
/
<asp:TextBox ID="txtKilometers" ClientIDMode="Static" runat="server">
</asp:TextBox>Kilometers
</div>
</form>
</body>
</html>
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
<script>
function myFunction()
{
alert("You pressed a key inside the input field");
// get value of textbox1, sdo the calculation
// set value of textbox2
var x = document.getElementById('textbox1').value;//get integer part of value
document.getElementById('textbox2').value = x/1000 + 'km';
}
</script>
<input type="text" id="textbox1" onkeypress="myFunction()">
<input type="text" id="textbox2">
Call (even better bind it to textBox event) JavaScript/jQuery function to covert from text in first text box and put in second text box.
How to bind event? See it here..
Jquery text change event
http://api.jquery.com/change/
try this jquery solution
add jquery library
<asp:TextBox runat="server" ID="TextBox1" runat="server"/>
<asp:TextBox runat="server" ID="TextBox2" onkeyup="callFunction()" runat="server"/>
<script type="text/javascript">
function callFunction() {
var TextBox2_val = $('#<%= TextBox2.ClientID %>').val();
$('#<%= TextBox1.ClientID %>').val((parseFloat(TextBox2_val) / 1000).toString());
}
</script>
I did a small style changing app using Jquery in Asp.Net 3.5 .I am having IE7.
When i click on button the paragraph color should change.
Problem is ,the color is changing,it is not stable.Means just like blinking.
Please find the code below
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Button1").click(function() {
$("p").css("background-color", "Yellow")
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<p>This Should be in <br/>
yellow</p>
</div>
</form>
</body>
</html>
Its because ASP.NET changes the ID attribute to be something it can resolve.
If you are using ASP.NET 4, set the ClientIDMode to AutoID.
If you are using anything else, change your selector to use "#<%= Button1.ClientID %>"
Also, return false to prevent the form from being postbacked.
try this :
$("#<%=Button1.ClientID %>").click(function() {
$("p").css("background-color", "Yellow")
});
When the Button renders on the client it won't have id = "Button1"
Change:
$("#Button1").click(function() {
to
$("#<%=Button1.ClientID%>").click(function() {
$("input[id$='Button1']").click(function() {
button click stuff here.
});