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>
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.
How can I find the title of parent window in javascript?
I use
alert(window.parent.document.FormName);
and
alert(window.parent.document.title);
and
alert(window.parent.parent.document.title);
but the result wasn't true.
use this code for your solution
pageMain.html
<html>
<head>
<title>Parent Window</title>
</head>
<body>
<input type="text" id="data" value="23444" />
Open Child Popup window
</body>
<script>
function openChildWindow() {
window.open('page1.html','childWindow','width=400,height=400');
}
</script>
</html>
page1.html
<html>
<head>
<title>Child Window</title>
</head>
<body onload="initializeMainDiv();">
<div id="mainDiv"></div>
</body>
<script>
function initializeMainDiv() {
alert( window.opener.document.title )
}
</script>
</html>
You are probably trying to access the title of the parent window from an iframe which is located on another server. For security reasons it is impossible.
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>
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.
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.
});