Datepicker in wrong position - javascript

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.

Related

Javascript open iframe and hide image?

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" ...

jquery script not working inside HTML

( Answered: dont use <script type="text/javascript" src="jquery-1.8.0.min.js"></script> in html)
I am learning Jquery from this tutorial :
http://www.littlewebhut.com/javascript/getting_started/
I created One Html , 1 js file . put them on same physical folder ,put "jquery-1.8.0.min.js" in same folder , put a link of js file in html page
But it is not working .
my HTML:
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
My Jquery Page (my_code.js) :
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
there is some minor mistake that is happening ,
I tried to search , but could not found relevant link .PLease suggest if I am missing something
Your code is working fine.There must be some problem with your jquery file path. Try including CDN hosted jquery library as follows or check your path:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
I have tried this on js fiddle and it's working fine I guess this is what you want ,right when on clicking the h1 tag you need that p to hide if I am not wrong ,
This is the js fiddle http://jsfiddle.net/Saranshshrma/7rzLW/1/
If this script is, small you can always put in, this
<script></script>
Tags before body content but remember put your Jquery before anything else any script or code you want to execute and you can post the chrome inspect element errors while executing this code
What error are you getting ? See the console/dev tools (f12) and notice you have to click the header text to trigger the effect:
http://jsfiddle.net/m5LL4/
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
I did paste your code, just take a part of the html with the same jquery version and it works.
Is javascript enabled in your browser?
If you are using chrome Go Ctrl+H click on Setting in left side->show advanced Setting->Privacy->Content Settings->Allow all sites to run Javascript.
If already checked check for your jquery path file name.

JQuery $("#content").append not working

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

Infobox display on click

I've searched for 3 hours now and cant find a solution. All im after is when you click on an input field in a form, an infobox at the side reveals itself. I tried messing about with jQuery and just couldnt get it to work even though im sure the code is correct (aren't we always lol).
Anyway id appreciate any solution.
My attempt at jquery/css/html looks like this
<!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">
<html>
<head>
<style>
.infoBubble {
visibility:hidden;
color:#000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
</script>
</head>
<body>
<form action="process.php" method="get">
<div class="row">
<span class="label">Description: </span>
<input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
</div>
</form>
</body>
</html>
Firstly, your JavaScript is being executed before the document has finished loading, meaning the input field does not exist. Attach your code to jQuery's ready event to prevent this from happening.
$(function() {
$('.box').click(function () {
$('.infoBubble').css({'visibility':'visible'});
});
}
Secondly, an element hidden with visiblity: hidden will still take up space in the layout. Usually you would use display: none to make it seem as if the element were not there at all. Either way, you can use the show method to make the element visible.
CSS:
.infoBubble {
color: #000;
display: none;
}
JavaScript:
$('.infoBubble').show();
Thirdly, it is possible that your users focus the input without clicking on it (e.g., by pressing tab)! By using the focus event instead of click you can show the message regardless.
$('.box').focus(function() {
$('.infoBubble').show()
});
In addition to the above, you can also use the blur event to hide the message when the user no longer has focus on the input (when they click elsewhere, or tabbing out of it). All together you end up with something like this:
$(function() {
$('.box').focus(function() {
$('.infoBubble').show();
}).blur(function() {
$('.infoBubble').hide();
});
}
Try the following:
$('.box').click(function (){
$('.infoBubble').toggle();
});
By the way. The css-property to hide/show something is not visibility, but display. For example:
display: none;
or
display: block;

javascript (jQuery) not working in IE6

I have developed a dragable div with an image inside using jquery. The script is working perfectly in Firefox, chrome but not it IE6. could you please help me to fix this issue
check the web page here : my web page
Thank you very much for your consideration.
IE uses clientX and clientY instead of pageX and pageY. Some people fix this by doing the following:
//if IE, then:
if (e.srcElement) {
e.pageX = oEvent.clientX + document.body.scrollLeft;
e.pageY = oEvent.clientY + document.body.scrollTop;
}
//rest of event handler goes here
I would probably not write the code myself. jQuery UI provides a $(...).draggable() method that should work, and is cross-browser tested. You can even custom build a jQuery UI download that will only include the components you want.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/download
Unless you expect a lot of your visitors to use it - just drop IE6 support. Keeping sites IE6 compatible either increases code redundancy or degrades quality.
Since you're already using jQuery, why not use jQuery UI's draggable component? This way, you don't have to deal with all the mouse down calculations. I switched your site's code to use jQuery UI's draggable functionality and it was pretty quick and required a lot less code.
Here's the code I used:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Drag and drop</title>
<style type="text/css">
#dv {
position: absolute;
cursor: move;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#dv").draggable({
cursor: 'crosshair'
});
});
</script>
</head>
<body>
<div id="dv" style="position:absolute;left:300px;top:200px;">
<img src="http://www.mejoyal.com/jquery/drupal.png" />
</div>
</div>
</body>
</html>
Hope this helps!!

Categories