I have different divs repeated in the same page. This is the example simplified: http://jsfiddle.net/8gPCE/
What I try to do is:
-Click on a green and only his red fadeOut
-The other red fadeIn
-And when I click to anywhere else like the background all the red fadeIn
I have been hour trying and I don't find the 3 things at the same time.
Something like this doesn't work.(and I just try the 2 first things):
$(function(){
$("#green").click(function() {
$(this).siblings(".red").fadeOut("slow");
$(this).parent().not(this).children(".red").fadeIn("slow");
});
})
I have a table and there is a TreeView in a cell. Here is my code:
<style>
#leftPanel
{
width:60px;
height:'100%';
border:1px solid red;
background:yellow;
}
<style>
<table>
<tr>
<td>
<div id="leftPanel">
<asp:PlaceHolder runat="server" ID="TreeView" />
<%-- Here is a TreeView --%>
</div>
</td>
</tr>
<%-- other code --%>
<table>
$(function () {
$('#leftPanel').resizable(
{
handles: 'e, w'
});
});
I can't reduce the size of my div less then the size of my TreeView.
What code need I write to allow leftPanel to be less than the size of TreeView ? It is necessary if TreeView node's text too long.
I have a div, let's call it class="phoneNo". Inside the div there are two links, one to add another div just like it, and another to delete the div itself. I'm trying to create a loop where if there's only 1 of these divs, the "delete" link should hide, and if there are more than 1 of these divs, the "delete" link should show up on all the divs.
So far I came up with this, but no success:
var pCount = $(".phoneNo").length;
$(pCount).each(function(){
if (pCount <= 1) {
$("a.deleteThis").hide();
}
else if (pCount >= 1) {
$("a.deleteThis").show();
}
return true;
});
How do i find dynamic average for not the 20 input boxes with ".num" class but even just five out of 20. I have done it as below but it won't work
$.fn.sumValues = function() {
var sum = 0;
this.each(function() {
if ( $(this).is(':input') ) {
var val = $(this).val();
} else {
var val = $(this).text();
}
sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
});
return sum.toFixed(2);
};
$(document).ready(function() {
$('input.price').bind('keyup', function() {
$('span.total').html( $('input.price').sumValues()/$('.num').length );
});
});
step1 batch in dynamically loaded after selecting one of the value from dropdown step 2 is loaded by ajax call in setp 2 when i click on edit step 3 is loaded via ajax call again in step 3 when i click on edit ajax call is working fine but its nit posting the value to php script
//ajax call
function validateFees(strAddNo) {
var collectFees = $("#collectFees").val();
if(collectFees == "")
{
$("#validateFeesResult").html('<div class="info">Please enter your Fees Amount.</div>');
$("#collectFees").focus();
}
else
{
var dataString = 'collectFees' + collectFees + 'strAddNo' + strAddNo;
$.ajax({
type: "POST",
url: "validateFees_script.php",
data: dataString,
cache: false,
beforeSend: function()
{
$("#validateFeesResult").html('Loading...');
},
success: function(response)
{
$("#validateFeesResult").hide().fadeIn('slow').html(response);
}
});
}
}
I'm sure it's extremely simple but I'm not understanding how to do it?
im designing a website and i have screen resolution problem. I want to scale my page but i cant do it.
Its my website and 21.5 inc mac screen: (its done, no problem)
Its my laptop screen 1366 x 768 px resolution;
I tryed this on css;
body, html {height:100%;}
and this on html;
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
Doctype is: XHTML 1.0 Transitional
but doesnt work. How can i do it?
Thanks!
I have a very large form I need the user to complete. They need to be able to save their progress whether valid or not. When they have come back at a later time, they can update and make valid - then submit the data.
I am using client side scripting (xval), server side attributes on the domain model.
even with a piece of code like this
$.get('getforums.php', function(data) {
alert(data);
});
works well in chrome, firefox, safari, opera but not this baby.
tried everything, cleared cache, recreate this file in different editor,
even make this file just echoed a 's', but no,
it just don't like this file, works perfect on other file
thanks for the help!
The webpage is here:
http://develop.macmee.com/testdev/
I'm talking about when you click the ? on the left, it is supposed to open up a box with more content in it. It does that in every browser except IE!
function question()
{
$('.rulesMiddle').load('faq.php?faq=rules_main',function(){//load page into .rulesMiddle
var rulesa = document.getElementById('rulesMiddle').innerHTML;
var rules = rulesa.split('<div class="blockbody">');//split to chop off the top above rules
var rulesT = rules[1].split('<form class="block');//split to chop off below rules
rulesT[0] = rulesT[0].replace('class=','vbclass');//get rid of those nasty vbulletin defined classes
document.getElementById('rulesMiddle').innerHTML = rulesT[0];//readd the content back into the DIV
$('.rulesMain').slideToggle();//display the DIV
$('.rulesMain').center();//center DIV
$('.rulesMain').css('top','20px');//align with top
});
}
I'm temporarily adding contents to a div,tempDiv, and adding that to a link which is appended to a div, #contentHere, that's displayed. I need to clear the contents of tempDiv so that the links aren't appended to each other, creating a string of urls that don't link to anywhere.
$(document).ready(function(){
$.getJSON("data.php", function(data){
for(i = 0; i < 5; i++){
$("#tempDiv").append(data.justIn[i].dataLink+ ' ');
$("#contentHere").append("<a href=\"#tempDiv\">Click to go to the div link</a>");
//I need to clear the contents of tempDiv here
}
});
});
Solutions to clearing the temporary contents of the div as I go?
$(document).ready(function () {
$('#keywordframe').contents().find("#step12").html('');
$('#keywordframe').contents().find("#step12").html('11');
$('#keywordframe').contents().find("#step13").html('');
$('#keywordframe').contents().find("#step13").html('12');
$('#keywordframe').contents().find("#step14").html('');
$('#keywordframe').contents().find("#step14").html('13');
$('#keywordframe').contents().find("#step15").html('');
$('#keywordframe').contents().find("#step15").html('14');
});
I try to use the above code to change the content in an iframe, but it is not working. Unless I put alert(''); on top of $('#keywordframe').contents().find("#step12").html('');
if just will take effect. What is the reason for that, anyone could help?
I am using the scroll in a swf file.. is there anyway to disable the scroll mousewheel on all browsers.. I get it working for IE and FF but Webkit is not working:
$(document).ready(function() {
$("#ebook").hover(
function () {
document.onmousewheel = function(){
return false
};
console.log('On');
},
function () {
console.log('Out');
document.onmousewheel = function() {
return true;
}
}
);
});
I am facing some problems with my server space. The images are using all the space from the server, making it slow. As it is an eCommerce website, it cannot be slow or we lose customers.
If I have the following:
SKU's :
ABC123-001 > catName > Phone
ABC753-851 > catName > MAC
AT1233-098 > catName > PC
How can I use trim to make it the following:
SKU's :
123 > catName > Phone
753 > catName > MAC
1233 > catName > PC
Which I would use in the following script:
<script type="text/javascript">
$(function(){
var sku = $("#ProductBreadcrumb ul li:last").text();
$(".ProductThumbImage img").attr('src','http://img.example.com/images/'+catName+'/'+sku+'.jpg');
});
</script>
So, basically, the output for the picture link would be:
http://img.example.com/images/phone/123.jpg
http://img.example.com/images/mac/753.jpg
http://img.example.com/images/pc/1233.jpg
So yeah, first problem I have to face is.. How can I trim it?
I am not familiar with JavaScript so any help would be really appreciated :D
I have a site that plays a stream. I perform an AJAX call to the server once a person presses a button.
<input type="submit" class="play" data-type="<?php echo $result_cameras[$i]["camera_type"]; ?>" data-hash="<?php echo $result_cameras[$i]["camera_hash"]; ?>" value="<?php echo $result_cameras[$i]["camera_name"]; ?>">
This prints out a bunch of buttons that the user can select. This is processed by the following code:
<script>
$(document).ready(function(){
$(".play").click(function(){
var camerahash = $(this).data('hash');
var cameratype = $(this).data('type');
function doAjax(){
$.ajax({
url: 'index.php?option=streaming&task=playstream&id_hash=<?php echo $id_hash; ?>&camera_hash='+camerahash+'&format=raw',
success: function(data) {
if (data == 'Initializing...please wait')
{
$('#quote p').html(data);
setTimeout(doAjax, 2000);
}
else
{
if (cameratype == "WEBCAM" && data == 'Stream is ready...')
{
$('#quote p').html(data);
window.location = 'rtsp://<?php echo DEVSTREAMWEB; ?>/<?php echo $session_id;?>/'+camerahash;
}
else if (cameratype == "AXIS" && data == 'Stream is ready...')
{
$('#quote p').html(data);
window.location = 'rtsp://<?php echo DEVSTREAMIP; ?>/<?php echo $session_id;?>/'+camerahash;
}
else
{
$('#quote p').html(data);
}
}
}
});
}
doAjax();
});
});
</script>
The server returns the messages such as Stream is ready.... My problem is that everything is working great except on additional button clicks. Specifically when they get success (video plays) and they exit back out, they don't get any other messages if they click another button. It is as if the click event is not triggered. Do I need to be doing something to the click handler to respond?
I have a number of apps all under the same domain: E.g.:
app1.overflow.com
app2.overflow.com/email
app3.overflow.com/home
I setting using these functions: http://www.elated.com/articles/javascript-and-cookies
How can I setup the cookie so that It can be read across all of the applications?
I dont seem to be able to get this to work?
Are these suggestions good to give for a successful training session?
Practice time should be always given immediate after technical training?
usually after receiving any technical session about any new thing we do routine work.
If we don't do practice just after training, later when we do any work related to that training then we feel we need training again. So if we are getting training today and will not use it for some period of time (15 -30 -60 days) then the training is of no use, as it is at the wrong time. I.e. We will forget many things
Any other suggestions which i should give? I'm trainee not trainer. What suggestion should i give to trainer/organizer?
hi,
here is my problem:
<input type="text" class="datepick1" id="date" />
<input type="text" class="datepick2" id="date" />
<input type="text" class="datepick3" id="date" />
then i apply datepicker on dom (by classname)
$('.datepick1').datepicker();
$('.datepick2').datepicker();
$('.datepick3').datepicker();
= the three dom have datepicker but, onselect date, it change automatically the first one (datepick1)
HELP
I would like to add a label AFTER a group of radio inputs IF the first has a certain class
<label>Has the strategy and all of it's relevant background documents been uploaded</label>
<label for="Radio1"><input type="radio" name="uploaded" class="required cat1" id="Radio1">Yes</label>
<label for="Radio2"><input type="radio" name="uploaded" id="Radio2">No</label>
Radio1 has the class, but I'd like to insert a label after the last (in this case Radio2)
I thought I could use this:
$('input[type="radio"].cat1').siblings('input:last').after('<label>Hi!</label>');
But it doesn't work. Can you pick what I am doing wrong?
I ask this because I am currently trying to work out my own technique, and there are huge strategic hangups for the entire site when your begin this. Of them are:
Using jCrop and rMagick, it takes up a huge amount of processing ( to which I have backgrounded ).
Because I have it backgrounded, I must by ajax develop a feature that auto-updates every five seconds to check when the backgrounding is done.
Has anyone accomplished this with their sites? If so, what are some creative techniques you came across to keep the processing streamline, and the users happy?
Given is a form that is followed by a confirmation page where you have to confirm you entered data of previous form. Now if the user refreshes this recapitulation page, the data form the previous form reposts. Is there a way to prevent that in JavaScript?
I know its not a ideal solution, it should happen on the server side. But i have no choice in this case.