I'm sure this is a complete bonehead move on my side, but can't figure out what's happening here.
I'm trying to select a div with a specific word in it, but Jquery seems to select the div on the wrong level. If you run this you'll see what I mean:
<!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 src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () {
$(".ms-my-profileDetails:contains('Birthday')").css("color", "red");
});
</script>
</head>
<body>
<div class="ms-my-profileDetails">
<div>
Department : <a href='http://Someurl'>IT</a>
</div>
<br />
<div>
Birthday : <a href='http://Someurl'>1921-04-13</a>
</div>
<br />
</div>
</body>
</html>
The result of the above contains matches the entire div of Birthday and Department <div class="ms-my-profileDetails"> when I only want the Birthday Div.
Pls help.
Tx
You should to something like:
$(".ms-my-profileDetails").children(":contains('Birthday')").css("color", "red");
That should look only on child divs and therefore select the div you want in this case...
An alternative to Antons solution, no idea if it is more efficient
$(".ms-my-profileDetails > div:contains('Birthday')").css("color", "red");
Use :last using contains gets all elements with the keyword you are searching for, so you must use :last to get the exact element that contains it
$("div:contains('Birthday'):last").css("color", "red");
Your selector is wrong.
You tell jQuery to search the element with ".ms-my-profileDetails" that contains "Birthday".
There's only 1 element in your html with that.
Now, you want the div containing "Birthday" INSIDE the element with ".ms-my-profileDetails". That would be :
$(".ms-my-profileDetails div:contains('Birthday')").css("color", "red");
http://jsfiddle.net/pquT7/
tyr this
$(".ms-my-profileDetails").children().last().css("color", "red");
Related
I am trying to open an iframe on click and hide the image. Any help as to why this does not work would be great! Thanks
<!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>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#button').click(function () {
if (!$('#iframe').length) {
$('#iframeHolder').html('<iframe id="iframe" src="http://www.test.com" width="100%" height="700"></iframe>');
document.getElementById('loadingimage').style.visibility = 'hidden';
}
});
});
</script>
<div id="button"><img id "loadingimage"class="alignnone size-full wp-image-2077" src="https://www.test.jpg"
alt="test image" width="860" height="474" /></div>
<div id="iframeHolder"></div>
</body>
Several points:
As #stud3nt noted, your HTML is invalid. Also a space is missing between "loadingimage" and class. You should be using an editor that highlights HTML and JavaScript syntax errors.
Use proper the HTML elements for the proper job. If you want to have a button, then use a <button> element and not a <div> element.
Hiding the image inside the "button" with visibility: hidden is strange thing to do. This won't remove the button element, so it's still there and still can be clicked. Learn the difference between visibility: hidden and display: none. When you are using jQuery you can use .hide() and you should use it on the "button" itself and not its content.
jQuery 1.6.0 is ancient. Either use a current version, or better, don't use jQuery at all. For one jQuery isn't really necessary anymore and also as a beginner you should learn how to write plain JavaScript.
There is typo in your img html element.
You forgot to add = in <img id "loadingimage" ...
Correct code - <img id="loadingimage" ...
I am developing an php aplication and I used datepicker javascript. The problem with this is that if I scroll down it does not appear in the right position. It gets really bad if the page gets too long, the date picker is not even visible.
I am using IExplorer, it might be outdated. It is not a solution to update the browser, cause this needs to run on 200+ PCs
<script type="text/javascript" language="javascript">
$(function(){ $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); });
</script>
<input type="text" id="udate" name="udate">
Code as requested by comment
<style type="text/css">
html {
overflow-y: scroll;
}
body {
size:8;
}
</style>
<!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>
If the datepicker is generated inside the container this wouldn't be a problem.
See this
Solution: http://jsfiddle.net/jbK6a/15/
I placed the datepicker behind the input with the beforeShow event.
And I used position: relative; on the scrollable container so that the absolute element listens to the container.
Or Allow the scroll for your list and fix the Date picker.
Try this work around to adjust position of datepicker after it opens (please adjust position as per your requirement)
<script type="text/javascript" language="javascript">
$(function(){
$("#udate").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
<input type="text" id="udate" name="udate">
make sure you got
<!DOCTYPE html>
at the top of your html output.
The solution was a combination of the answers.
For start I did what norhkildonan said:
make sure you got
<!DOCTYPE html>
at the top of your html output.
Then edited a bit the css and after that added Bhushan Kawadkar part:
<script type="text/javascript" language="javascript">
$(function(){
$("#udate").datepicker({ dateFormat:'yy-mm-dd'});
// bind click event and adjust datepicker position.
$(".hasDatepicker").click(function(e){
$("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
});
});
</script>
<input type="text" id="udate" name="udate">
What worked for me was adding the class 'container' where I needed it attached.
I'm trying to learn JQuery, but not doing well. Currently, I'm trying to learn how to use .append to have Ajax functionality which allows one to view new dynamic content without reloading. When I try the following, however, nothing occurs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>JQuery Test</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="content"/>
<script type="text/javascript">
function callback() {
$("#content").append($("qwerty"));
};
$(document).ready(function() {
//window.setTimeout(callback, 100);
callback();
});
</script>
</body>
</html>
To the best of my knowledge, this should make "qwerty" appear as if I has simply done <div id="content">qwerty</div>, but instead I get a blank page. If I replace the .append call with alert("qwerty"), it is properly displayed. What am I doing wrong?
You are trying to find an element with tagname qwerty in the dom like <qwerty>sometext</qwerty> and append it to #content.
To append the string qwerty to #content use
$("#content").append("qwerty");
Demo: Fiddle
$("#content").append("qwerty").
Just remove $ simple in your coding.. if you want to append text, you can directly pass the text in double quotation
i have this really weired js problem.
in summary, i get a element not found if i use (document.getElementsByTagName("p"))[0]
and if the p tag is inside a div like this
<div id="main">
<p>see</p>
</div>
but as soon as i remove the div wrapper, all things work.
after 30 min, i've reduced the problem to this simple code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ttttttttttttttttttttt</title>
</head>
<body>
<div id="main">
<p>see</p>
</div>
<script type="text/javascript">
var myobj = document.createElement("div");
myobj.innerHTML='yesyes';
document.body.insertBefore(myobj, (document.getElementsByTagName("p"))[0] );
</script>
</body>
</html>
put above in a file. Open in Firefox or Chrome or IE8. If successful, you should see “yesyes”.
If you remove the <div id="main"> wrapper, then it works.
it seems there something i'm not understanding about getElementsByTagName??
Nothing to do with getElementsByTagName, everything to do with insertBefore. Try this:
document.getElementById('main').insertBefore(myobj, (document.getElementsByTagName("p"))[0] );
insertBefore needs the parent element. It won't function the way you are calling it (on body), so I just looked up the "main" div instead.
Your problem is with document.body.insertBefore, not with document.getElementsByTagName -- you can see this for yourself by sticking the line
alert(document.getElementsByTagName("p")[0].innerHTML);
at the beginning of the script.
So what's going on with insertBefore? It is a method of all DOM nodes, as you can see at that link, and it will only insert an element (or "document fragment") before one of the direct children of that node. When you have <div id="main> in there, the <p> found by getElementsByTagName is not a direct child of the <body>, so body.insertBefore will not do what you want.
To get the effect you want, use instead
var first_p = document.getElementsByTagName("p")[0];
first_p.parentNode.insertBefore(myobj, first_p);
You have to specify the parent element, not document.body for .insertBefore.
<div id="main"><p>see</p></div>
<script type="text/javascript">
var myobj = document.createElement("div");
myobj.innerHTML='yesyes';
document.getElementById('main').insertBefore(myobj, document.getElementsByTagName("p")[0] );
</script>
you need to append child myobj before inserting it into body
document.body.appendChild(myobj);
Thanks for taking the time to read this.
I have an unknown number of (dynamically inserted) input elements in a form, to each of which I want to attach the datepicker widget included in jQuery UI.
All of the input elements that I want to attach the datepicker to have a class of "date-pick". Obviously because we have more than one matching element we need more than just a class name so that the date value gets returned to the originating field rather than just the first match.
Ordinarily I'd probably just do something like:
$("input.date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});
However in the code I'm working with, the input elements do not have unique IDs until the form data is saved (something that I'm unable to change), though they do have unique name attribute values of the format name="field_id_x[y][z]" which, when the form is saved then gets converted to an id of the format id="field_id_xyz".
So my question is, can anyone show me how to loop through all the input elements with a class of "date-pick" based on their name attribute values?
(PS It might also be worth mentioning that the number of matching input elements in the form can be increased/decreased by the user on the fly.)
Your code should work as it is. However, you could loop through by name like this:
$("input[name*='field_id_'].date-pick").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});
The date picker doesn't need the elements to have an ID. You're already looking up the elements for it. This should work:
$('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});
Note you don't even need the each call.
Complete example:
<!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" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type='text/javascript'>
$(function() {
$('.dp').datepicker();
});
</script>
</head>
<body>
<hr />
<input class='dp' type='text'>
<input class='dp' type='text'>
<input class='dp' type='text'>
</body>
</html>
have you tried something like
var namefield = "field_id_"
$("date-pick").each(function(index, element) {
if ($(element).attr("name").substr(0,namefield.length) == namefield) {
// code to process
}
});