Hello there,
I've got a textbox(id="tb1") and a button(id="btn1").
I want that whenever I click on btn1 a text "hello world" must be inserted in the tb1 at the current position of cursor in text-box.
Please provide me a cross browser solution for this.
Since I'm frosted from some heavy extra ordinary links so it'd be better to post a function considering the current scenario.
Thanks,
Guru
$(document).ready(function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var month = new array("January","February","March","April","May","June","July","August","September","October","November","December");
var mon;
mon = month(m);
var today = m+"/"+d+"/"+y
$('#calendar').append('<div id="today">Today is'+' '+mon+'/'+d+'/'+y+'.');
});
hi,
I have a javascript function..
<script type="text/javascript">
var RowClick = function() {
$("#mytable").click(
$("#showgrid").load('/Products/List/Items/'));
};
</script>
Can I call this function on onclick event on tr?
I am calling something like this?
<tr class="something" onclick="javascript:RowClick()');">
can i call like this? if I call its not loading the URL?
can anybody help me out?
thanks
Here is a sample fiddle: http://jsfiddle.net/K2zyU/4/
The problem I am experiencing is that the main navigation hover is applying to the sub navigation items. If for example, I were to move the list above the main navigation div the hover works as I would expect? I'm unsure of what I'm missing / doing wrong in this case.
<div class="main">MAIN NAV<div>
<ul class="sub">
<li>SUB NAV 1</li>
<li>SUB NAV 2</li>
<li>SUB NAV 3</li>
<li>SUB NAV 4</li>
<li>SUB NAV 5</li>
<li>SUB NAV 6</li>
</ul>
.main:hover, .sub li:hover {
color: black;
background-color: #f3ffff;
opacity: .6;
}
if I have 4 variables
startTime;
endTime;
startMerid;
endMerid;
startMarid and endMarid are either going to be 'AM' or 'PM'.
but startTime and endTime are going to be strings like 'dd:dd'
so it may be start:12:30 PM and end:5:30 PM
How can I validate that the end time is not before the start time?
Thanks!!
I want to know the selected value of the markup below. So that I can disabled a textbox, if one of the checkbox is selected.
<asp:CheckBoxList ID="ChkTest" runat="server" RepeatDirection="Horizontal" CssClass="toggleYesNo">
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0">No</asp:ListItem>
</asp:CheckBoxList>
I tried using this function it doesnot seem to work
$(document).ready(function() {
$("#<%=ChkTest.ClientID %>").click(function() {
value = $(this).val();
if(value=='1') {
$('#atextbox').attr('disabled','');
}
else {
$('#atextbox').attr('disabled','disabled');
}
});
});
I also track the output HTML but the id the CheckBoxList the assigned to a table instead.
UPDATED
<table id="ChkTest" class="toggleYesNo" border="0">
<tr>
<td><input id="ChkTest_0" type="checkbox" name="ChkTest$0" /><label for="ChkTest_0">Yes</label></td><td><input id="ChkTest_1" type="checkbox" name="ChkTest$1" /><label for="ChkTest_1">No</label></td>
</tr>
</table>
Right now, I am working with a page that is automatically updated and I'm using setInterval to check for new elements. I'd like to do this with events but I don't know how to tell if an element has been added to the page via an event.
Is this possible?
Hello, I want to do someoperations after click on row, except td with class='someClass'
$('#mainTable tr td:not([class=someClass])').unbind().live('click',function ()
{
//some operation
});
what is wrong?
note: this td is not last td in table.
I can see values shown in my table but I can`t read all of them except the first one using the following code;
function ReadNames () {
$('#Table tr td label').each(function () {
NameID.push(this.id);
});
}
How can I read all the values?The table is poplulated using a click on a dialog box
function addTableRow(jQtable, value, text){
jQtable.each(function() {
var $table = $(this);
var tds = '<tr>';
tds += '<td>' + '<label for="Name" id = ' + value + '>' + text + '</label></td>' + '<td><input type="button" value="Remove"/></td>';
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
}
else {
$(this).append(tds);
}
});
}
function read() {
$("#SelectBox option").each(function() {
var value = $(this).val();
var text = $(this).text();
addTableRow($('#Table'),value,text);
});
}
I have following divs on my page
<div id="rpttimeline">div 1</div>
<div id="rptareaview">div 2</div>
<div id="rptgalleria">div 3</div>
<div id="rptremainingwork">div 4</div>
<div id="rptremainingspec">div 5</div>
<div id="rptremainingreq">div 6</div>
<div id="rptremaininguserstory">div 7</div>
Initially through css I have the first two divs set to visible and the remaining are hidden.
in my document ready function I have
$(document).ready(function () {
window.setInterval(toggleDivs, 5000);
});
function toggleDivs() {
$('#rpttimeline').toggle();
$('#rptareaview').toggle();
$('#rptgalleria').toggle();
$('#rptremainingwork').toggle();
$('#rptremainingspec').toggle();
$('#rptremainingreq').toggle();
$('#rptremaininguserstory').toggle();
}
when toggledivs is called the first two divs get hidden but the other divs are not visible. It seems the toggle is affecting just the first two divs.
Am I missing something here?
I am constructing a lighbox gallery, currently experimenting with FancyBox (http://fancybox.net) and ColorBox (http://colorpowered.com/colorbox).
By default you have to include a link to the large version of the image so that the Lightbox can display it. However, I am wanting to have the image link URLs pointing to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg">
I want to do:
<a href="mysite/photos/view/abc123">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$user=$photo->user;
$this->renderPartial('_photo', array('user'=>$user, 'photo'=>$photo, true));
}
}
At some point in the future the function will also update the view count of the image.
Now this approach is working to an extent - most images load up but some do not load up (the lightbox gets displayed in a malformed state). I think the reason for this is because it is not processing the function quick enough. For example when I click the "next" button it needs to go to the URL, process the function and retreive/output the response.
Does anybody know how I can get this working properly?
I have a button on my web page that toggles the menu, After a postback the menu comes back despite me updating a hidden field value to store its state. Am I doing something wrong here? If there is a better way of doing it, let me know!
Markup:
<asp:Button ID="btnMenu" runat="server" Text="Hide Menu" UseSubmitBehavior="False"
OnClientClick="return toggleMenu(this);" />
<asp:Panel runat="server" ID="pnlMenuToggle">
//Main Menu
</asp:Panel>
<asp:Panel runat="server" ID="pnlSubMenuToggle">
//Sub Menu
</asp:Panel>
<asp:HiddenField ID="hfMenuState" runat="server" Value="true" />
<script>
//Toggles menu visibility
function toggleMenu(menuButton) {
var menuVisible = $('#<%=hfMenuState.ClientID%>').val() == 'true' ? true : false;
$('#<%=pnlMenuToggle.ClientID%>').slideToggleWidth();
$('#<%=pnlSubMenuToggle.ClientID%>').slideToggle('slow');
//Update whether the menu is visible
menuVisible = !menuVisible;
//Update menu button text
$(menuButton).val(menuVisible ? 'Hide Menu' : 'Show Menu');
$('#<%=hfMenuState.ClientID%>').val(menuVisible)
return false;
}
</script>
Code Behind:
(Page Load)
bool menu = Convert.ToBoolean( hfMenuState.Value );
pnlMenuToggle.Visible = menu;
pnlSubMenuToggle.Visible = menu;
The javascripts updates the hidden field value but it looks like this is never posted back to the server.
What can I do to make sure the menu stays hidden after postbacks.
I have also tried putting the hidden field in an Update Panel with Update Mode set to Always
I have a thing I'm doing where I need a webpage to stream a series of images from the local client computer. I have a very simple run here: http://jsbin.com/idowi/34
The code is extremely simple
setTimeout ( "refreshImage()", 100 );
function refreshImage(){
var date = new Date()
var ticks = date.getTime()
$('#image').attr('src','http://127.0.0.1:2723/signature?'+ticks.toString());
setTimeout ("refreshImage()", 100 );
}
Basically I have a signature pad being used on the client machine. We want for the signature to show up in the web page and for them to see themselves signing it within the web page(the pad does not have an LCD to show it to them right there). So I setup a simple local HTTP server which grabs an image of what the current state of the signature pad looks like and it gets sent to the browser.
This has no problems in any browser(tested in IE7, 8, and Chrome) but Firefox where it is extremely laggy and jumpy and doesn't keep with the 10 FPS rate. Does anyone have any ideas on how to fix this? I've tried creating very simple double buffering in javascript but that just made things worse.
Also for a bit more information it seems that Firefox is executing the javascript at the correct framerate as on the server the requests are coming in at a constant speed. But the images are only refreshed inconsistently ranging from 5 times per second all the way down to 0 times per second(taking 2 seconds to do a refresh)
Also I have tried using different image formats all with the same results. The formats I've tried include bitmaps, PNGs, and GIFs (GIFs caused a minor problem in Chrome with flicker though)
Could it be possible that Firefox is somehow caching my images causing a slight lag? I send these headers though:
Pragma-directive: no-cache
Cache-directive: no-cache
Cache-control: no-cache
Pragma: no-cache
Expires: 0
I'm trying to call two different functions for two different HTML elements at the same time, but the second function isn't being read at all. I'm also trying to use the id to specify which corresponding elements to grab data from. Here's what I have:
function changeImage(id)
{
var s = document.getElementById('showcase');
var simg = s.getElementsByTagName('img');
var slen = simg.length;
for(i=0; i < slen; i++)
{
simg[i].style.display = 'none';
}
$('#' + id).fadeIn('slow', 0);
function createComment(jim)
{
//alert('hello?');
var d = document.getElementById('description');
var dh = document.getElementsByTagName('p');
var dlen = dh.length;
//alert(dh);
for(i=0; i < dlen; i++)
{
alert(dh);
dh[i].style.display = 'none';
}
$('#' + jim).fadeIn('slow', 0);
}
I have a two or more forms on my page in a row.
I'm trying to hook submit event like:
$('form',someObj).submit(function(e){
/* Do some stuff with ajax */
return false;
});
But always receive events only from a first (by code) form.
Also used each() function to bind event for each object, same thing..
What's wrong?
Thanks!
I just want to toggle some elements when a link is clicked:
This is how i am trying (But i don't really think that it matters much for this question what's inside the event function callback):
/* mostrar exceso de comentarios a peticion del usuario*/
$('.toggleComments').click(function(){
console.log('.toggleComments');
if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){
$(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)');
}else{
$(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive');
}
$(this).parents('.helpContent').find('.commentHideble').slideToggle(100);
});
I even tried a boolean but gave me same result
/* mostrar exceso de comentarios a peticion del usuario*/
var ctoggle = false;
$('.toggleComments').click(function(){
if(ctoggle == false){
ctoggle = true;
console.log('.toggleComments');
if($(this).parents('.helpContent').find('.commentHideble:visible').length > 0){
$(this).text('+ <?=get_texto_clave('show_old_comments')?>').removeClass('toggleCommentsActive').append(' ('+$(this).parents('.helpContent').find('.commentHideble:not:visible').length+'+)');
}else{
$(this).text('- <?=get_texto_clave('hide_old_comments')?>').addClass('toggleCommentsActive');
}
$(this).parents('.helpContent').find('.commentHideble').slideToggle(100);
ctoggle = false;
}
});
Why the log is being fired twice by click?
Hey,
I am trying to use "form:has" selector which works on Chrome but not on IE.
http://jsbin.com/uvumu/2
Does anyone have any idea why it is not working on IE? (when pushing the Post button there should be an alert box)
Edited:
Here is the code:
JS:
$(document).ready(function() {
$(".comment-link").live('click',function() {
return false;
});
$("#morefeeds-link").click(function () {
return false;
});
// Form submittion - doesnt work
$("form:has(.commentBtn)").live('submit',function () {
alert("a");
return false;
});
return false;
});?
HTML
<form>
<a href="#" class="comment-link" style="font-size:12px;">Comment</a>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
<input type="hidden" name="commentkey" value="1">
<input type="text" name="commenttext" class="commentfocus" value="Express your opinion">
</td>
<td valign="middle"><input type="submit" class="commentBtn" value="Post"></td>
</tr>
</table>
</form>
Hi,
I am generating some list items as a result of a search, and I want to attach some data to each list element from the search (possibly a bad idea to merge ui and data), but now curious about it. I am doing this:
var element = $("<li>Hello</li>);
element.mydata = "foo";
element.appendTo("#panelParent");
so I'm just assigning my stuff to element.mydata. My click handler reports that no such data exists for the element when clicked:
$('#panelParent').delegate('li', 'click', function() {
// this.mydata is undefined.
});
where did it go to? I could keep the data external to the a list item element, was wondering if there's a convenient way like this to just keep it bound though?
Thanks
I have HTML popup window and i want add text after opening window with spec. function:
var win = window.open('private.php', data.sender_id , 'width=300,height=400');
win.window.onload = function() {
//function for add text
//chrome and firefox fire, IE and Opera not
};
This work perfectly with Chrome and Firefox, but Opera and IE9 won't working. Please tell me
best way to do that with IE and Opera.
I try with:
$(document).ready(function(){
//function for add text
});
but same thing.
I found solution, but i wont know is there better solution then setTimeout???
Instead onload event i use:
setTimeout(function(){
//add text
},200);
I'm doing something similar to close caption but not exactly the same. I have a youtube video, and I want to display certain messages at specific points in the video.
When the video loads, I pull entries from the database in the format time and sentence. For example, at 0:20 the speaker says "don't forget to write down my email that you see on the side" and I want to display the email on the side. At 0:50, he says "and I'll post my office hours" so I want to show those office hours at that time.
How can I do this. The video itself is hosted on youtube, but is being displayed on a private website. The div where I want to display the messages is <div id="write">.
I need to access to a value in a checkbox, the atribute value has content, so i need to place the id somewhere else i created a label, but i have not access to that value
alert(check[i].label); // doesnt work
where else can i place a value in checkbox.
Please dont write that i can do this
<input type='checkbox' id='bla' name='mybla' vlaue='myvalue'> Hy
Where can i place some other values ?
I tryed with this
<input type='checkbox' id='bla' name='mybla' vlaue='myvalue' label='myothervalue'> Hy
first i get all checkbox ect... and in the for loop i did this
alert(check[i].label); // doesnt work
How can i do that?